/* ======================================================================================================
   Passport & Practice: the flows (flows.css). Registration, waitlist, my registration, CE portal, shop.
   Only what is new for these pages: tokens, grounds and every shared component come from site.css.
   Phone first (390 px), then desktop. Nothing here needs JavaScript: .js-only parts show with the script,
   .no-js-only parts without it. All movement stops under prefers-reduced-motion (end of the file).

   1. helpers            .js-only .no-js-only .demo-line .rows__minus .rows__today
   2. opening band       .flow-head (__grid __words __pic __side __facts) .flow-body .next-stubs
   3. register           .reg-top .reg-stepper .reg-grid .reg .leg (__head __n __body __nav) .reg-options
                         .choice__left .reg-waits .reg-addon .reg-group .reg-only .reg-full .sched .promo
                         .demo-extra .review .terms .term .pay .reg-bar .reg-side .rpass
   4. waitlist           .wl-grid .wl .wl-one .wl-how .place .wl-pos
   5. my registration    .my .my-pass .my-grid .my-block .my-guests .pays .owe .my-pay .ce-band .ce-card .my-terms
   9. the portal forms   .prel .prev .my-comp .my-req .plist__gap .my-main--one (release, final review, companion, request)
   6. CE portal          .portal (__door)
   7. shop               .shop-grid .shop-card .shop-add .shop-qty .shop-note .product .cart-grid .cart-rows
                         .cart-row .cart-sum .co .order__ticket .order__addr
   ====================================================================================================== */

/* ---------- 1. Helpers ---------- */
html:not(.js) .js-only { display: none !important; }
html.js .no-js-only { display: none !important; }
.demo-line { display: flex; align-items: center; justify-content: center; gap: 0.6em; font: 500 var(--t-mono) / 1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-soft); }
.demo-line__mark { flex: none; width: 1.6em; height: 1.1em; border: 1.5px solid currentColor; border-radius: 3px; background: linear-gradient(currentColor, currentColor) 0 32% / 100% 2px no-repeat; opacity: 0.8; }
.rows .rows__minus dt, .rows .rows__minus dd { color: var(--accent); }
.rows .rows__today dd { font: 500 1.125rem / 1.2 var(--mono); letter-spacing: 0.02em; color: var(--head); }
.page--flow .field__error { scroll-margin-top: calc(var(--header-h) + 6rem); }

/* ---------- 2. The opening band of a flow page ---------- */
/* On the ground of the line. The framed picture hangs over the lower edge onto the page below. */
.flow-head { z-index: 3; overflow: visible; }
.flow-head__grid { display: grid; gap: var(--s-6); align-items: end; }
.flow-head__words .opener { max-width: 44rem; }
.flow-head__facts { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.flow-head__pic { width: min(78%, 22rem); margin: 0 0 -5.5rem auto; padding-right: 0.5rem; }
.flow-head__pic .pic__corner .stamp { --stamp-size: 5.75rem; }
.flow-head__side { display: none; }
.flow-head + .flow-body { padding-top: calc(var(--pad, var(--section)) + 3rem); }
.flow-head--plain + .flow-body { padding-top: var(--pad, var(--section)); }
/* any other band that follows the picture leaves room for the part that hangs over it */
.flow-head:not(.flow-head--plain) + .section:not(.flow-body) { padding-top: calc(var(--pad, var(--section)) + 6rem); }
@media (min-width: 56.25em) {
  .flow-head__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 6vw, 6rem); }
  .flow-head__grid--one { grid-template-columns: minmax(0, 1fr); }
  .flow-head__pic { width: 100%; margin: 0 0 -7rem; padding-right: 1.5rem; }
  .flow-head__pic .pic__corner .stamp { --stamp-size: 8rem; }
  .flow-head__side { display: grid; justify-items: end; align-self: center; padding-right: 1rem; }
  .flow-head + .flow-body { padding-top: calc(var(--pad, var(--section)) + 1rem); }
  .flow-head--plain + .flow-body { padding-top: var(--pad, var(--section)); }
  .flow-head:not(.flow-head--plain) + .section:not(.flow-body) { padding-top: calc(var(--pad, var(--section)) + 3rem); }
}
.next-stubs { align-items: stretch; }
.next-stubs > .stub { height: 100%; }

/* ---------- 3. Register ---------- */
.reg-top { margin-bottom: var(--s-6); max-width: 50rem; }
.reg-stepper { max-width: 40rem; margin: 0 auto var(--s-6); }
.reg-stepper a.stepper__link { cursor: pointer; }
.reg-grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 62.5em) { .reg-grid { grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem); gap: clamp(2rem, 4vw, 4rem); } }
.reg { min-width: 0; }

/* one leg of the journey: a numbered paper panel with a perforation under its heading */
.leg, .wl, .co { position: relative; padding: clamp(1.25rem, 4.5vw, 2.75rem); border-radius: var(--r-l); box-shadow: var(--sh-2); }
.leg + .leg { margin-top: var(--s-5); }
.leg__head { display: flex; align-items: flex-end; gap: var(--s-4); margin-bottom: var(--s-6); padding-bottom: var(--s-5); border-bottom: 2px dashed var(--line-strong); }
.leg__head .eyebrow { margin-bottom: 0.35rem; }
.leg__head h2:focus { outline: none; }
.leg__n { flex: none; font: italic 300 clamp(3.5rem, 12vw, 5.5rem) / 0.8 var(--serif); letter-spacing: -0.05em; color: var(--coral); }
.leg__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 2px dashed var(--line-strong); }
.leg:target { box-shadow: 0 0 0 2px var(--navy), var(--sh-2); }
html.js .reg.is-stepper .leg { animation: leg-in 0.55s var(--ease) both; }
@keyframes leg-in { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }

.reg-options .choices__legend, .wl .choices__legend { font: 400 var(--t-s) / 1.25 var(--serif); letter-spacing: -0.01em; color: var(--navy); margin-bottom: var(--s-3); }
.choice__left { margin-left: 0.5rem; font-size: var(--t-small); color: var(--ink-soft); }
.reg-waits { display: grid; gap: var(--s-1); list-style: none; }
/* the companion add-on: a gold panel, like a tag tied to the single room */
.reg-addon { position: relative; padding: 1.4rem 1.1rem 0.9rem; border-radius: var(--r-m); background: var(--gold); color: var(--navy-deep); --fg: var(--navy-deep); --fg-soft: var(--navy-deep); --error: var(--navy-deep); --focus: var(--navy-deep); }
.reg-addon__tag { position: absolute; top: -0.9rem; left: 1rem; rotate: -3deg; }
.reg-addon .check { font-size: 1.0625rem; }
.reg-addon .check input { border-color: var(--navy-deep); }
.reg-addon .field__hint { padding-left: 2.3rem; }
.reg-addon__price { margin-left: 0.4em; font: 500 1rem / 1 var(--mono); letter-spacing: 0.02em; white-space: nowrap; }
.reg-addon.is-off { background: var(--cream); box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--ink-soft); --fg: var(--ink-soft); --fg-soft: var(--ink-soft); }
.reg-addon.is-off .check { cursor: not-allowed; }
.reg-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: var(--t-small); color: var(--ink-soft); }
.reg-only { display: grid; gap: 0.35rem; min-width: 0; align-content: start; }
.reg-only__when { font: 500 var(--t-micro) / 1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-deep); }
html.js .reg.is-live .reg-only__when { display: none; }
.reg-full { padding: 1rem 1.1rem; border: 1.5px solid var(--navy); border-radius: var(--r-m); }

/* the payment schedule: a navy panel inside the paper, one line per charge */
.sched { padding: 1.25rem clamp(1rem, 3vw, 1.75rem) 1.4rem; border-radius: var(--r-m); background: var(--navy); color: var(--cream); background-image: repeating-radial-gradient(circle at 100% 0, transparent 0 15px, rgb(var(--gold-rgb) / 0.1) 15px 16px); }
.sched .eyebrow { color: var(--gold); margin-bottom: var(--s-2); }
.sched__list { list-style: none; counter-reset: pay; }
.sched__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem var(--s-4); align-items: baseline; padding: 0.75rem 0; border-bottom: 1px dotted rgb(var(--cream-rgb) / 0.4); }
.sched__label { grid-column: 1; font: 400 1.125rem / 1.25 var(--serif); letter-spacing: -0.01em; }
.sched__when { grid-column: 1; font: 500 var(--t-mono) / 1.5 var(--mono); letter-spacing: 0.06em; color: rgb(var(--cream-rgb) / 0.9); }
.sched__when small { display: inline-block; margin-left: 0.8em; font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.sched__amt { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 500 1.0625rem / 1 var(--mono); letter-spacing: 0.02em; white-space: nowrap; }
.sched__row.is-today .sched__amt { padding: 0.35rem 0.6rem; border-radius: var(--r-pill); background: var(--coral); color: var(--navy-deep); }
.sched__note { margin-top: var(--s-3); color: rgb(var(--cream-rgb) / 0.82); }
html.js .sched.is-new .sched__row { animation: leg-in 0.45s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }

.promo { max-width: 28rem; }
.promo__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: end; }
.promo__row .input { text-transform: uppercase; font-family: var(--mono); letter-spacing: 0.08em; }
.promo__said { min-height: 1.4em; margin-top: var(--s-2); font: 500 var(--t-small) / 1.4 var(--sans); color: var(--navy); }
.promo__said.is-bad { color: var(--coral-deep); }
.demo-extra { border: 1px dashed var(--line-strong); border-radius: var(--r-s); padding: 0 1rem; font-size: var(--t-small); }
.demo-extra > summary { display: flex; align-items: center; min-height: 2.75rem; cursor: pointer; font: 500 var(--t-mono) / 1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.demo-extra .check { padding-bottom: 0.9rem; }

.review { display: grid; gap: var(--s-5); }
.review__who:empty { display: none; }
.terms .eyebrow { margin-bottom: var(--s-3); }
.terms__list { display: grid; gap: var(--s-2); list-style: none; margin-bottom: var(--s-2); }
.term { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem; padding: 0.8rem 1rem; border-radius: var(--r-s); background: var(--cream); }
.term__when { font: 500 var(--t-mono) / 1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.term__what { font: 400 1.125rem / 1.3 var(--serif); color: var(--navy); }
.term__now { justify-self: start; margin-top: 0.3rem; padding: 0.15rem 0.6rem; border-radius: var(--r-pill); background: var(--navy); color: var(--cream); font: 500 var(--t-micro) / 1.5 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.term.is-now { background: var(--coral); }
.term.is-now .term__when, .term.is-now .term__what { color: var(--navy-deep); }
@media (min-width: 40em) { .terms__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pay { display: grid; gap: var(--s-3); }

/* the amount due today, always in view on a phone */
/* "Due today" on a phone: a still line under the step, NOT a bar that sticks to the bottom of the screen. Stuck to
   the bottom it jumped as the browser's toolbar slid in and out (the owner: "the due today glitches and moves when you
   scroll"). */
.reg-bar { position: static; display: flex; align-items: baseline; gap: 0.75rem; margin: var(--s-5) 0 0; padding: 0.8rem 1.2rem; border-radius: var(--r-pill); background: var(--navy-deep); color: var(--cream); box-shadow: var(--sh-3); }
.reg-bar__label { font: 500 var(--t-micro) / 1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.reg-bar__amt { font: 400 1.5rem / 1 var(--serif); letter-spacing: -0.02em; }
.reg-bar__total { margin-left: auto; font: 500 var(--t-mono) / 1.4 var(--mono); letter-spacing: 0.04em; color: rgb(var(--cream-rgb) / 0.85); }

/* the boarding pass beside the form: it fills in as you go */
.reg-side { min-width: 0; }
.reg-side__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin-top: var(--s-4); }
.rpass .pass__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rpass .pass__title { font-size: var(--t-m); }
.rpass__plan { font-size: 1.0625rem !important; line-height: 1.3 !important; }
.rpass [data-pass-name].is-empty { color: var(--ink-soft); font-style: italic; }
.rpass__rows > div { padding: 0.5rem 0; font-size: var(--t-small); }
.rpass .is-flash { animation: pass-flash 0.9s var(--ease); }
@keyframes pass-flash { 0% { background: rgb(var(--gold-rgb) / 0.5); } 100% { background: transparent; } }

/* ---------- 4. Waitlist ---------- */
.wl-grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 62.5em) { .wl-grid { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); gap: clamp(2rem, 4vw, 4rem); } }
.wl-one__what { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font: 400 var(--t-s) / 1.25 var(--serif); color: var(--navy); }
.wl-how__list { list-style: none; --stack: var(--s-3); }
.wl-how__list > .stub:nth-child(odd) { rotate: -1deg; }
.wl-how__list > .stub:nth-child(even) { rotate: 1deg; margin-left: var(--s-4); }
.place { position: relative; display: grid; gap: var(--s-5); }
.place__stamp { justify-self: end; margin: -1.5rem 0.5rem -4rem 0; position: relative; z-index: 3; }
.place__stamp .stamp { background: var(--cream); box-shadow: 0 0 0 0.5rem var(--cream); }
.wl-pos { display: flex; align-items: baseline; gap: 0.6rem; }
.wl-pos__n { font: italic 300 4.5rem / 0.85 var(--serif); letter-spacing: -0.04em; color: var(--coral); }
.wl-pos__of { font: 500 var(--t-mono) / 1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
@media (min-width: 56.25em) {
  .place { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-7); }
  .place__stamp { justify-self: start; margin: 0; }
}

/* ---------- 5. My registration ---------- */
.my-pass { margin-bottom: var(--s-8); }
.my-grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 62.5em) { .my-grid { grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem); gap: clamp(2rem, 4vw, 4rem); } }
.my-block > .eyebrow { margin-bottom: var(--s-2); }
.my-block > h2 { margin-bottom: var(--s-5); }
.my-block > * + .small, .my-block > .notice { margin-top: var(--s-4); margin-bottom: var(--s-4); }
.my-guests, .my-terms { list-style: none; }
.my-guests > .stub, .my-terms > .stub { height: 100%; }
/* the refund windows stand in one line, earliest first: four of them are four across, never three and one below */
@media (min-width: 40em) { .my-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56.25em) { .my-terms--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 68em) { .my-terms--4 { --grid-gap: 1.25rem; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* across a row the three parts of each (the days, the refund, the line about today) sit on shared lines, so the dashed rules line up */
@supports (grid-template-rows: subgrid) { .my-terms > .stub { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--s-2); } }
/* the schedule: one paper line per payment, with a mark that says where it stands */
.pays { display: grid; gap: var(--s-2); list-style: none; }
.pays__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3) var(--s-4); align-items: center; padding: 0.9rem 1.1rem; border-radius: var(--r-m); background: var(--paper); box-shadow: var(--sh-1); }
.pays__mark { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1.5px dashed var(--line-strong); background: center / 0.9rem no-repeat; }
.pays__what { display: grid; gap: 0.1rem; min-width: 0; }
.pays__what strong { font: 400 1.1875rem / 1.25 var(--serif); letter-spacing: -0.01em; color: var(--navy); }
.pays__what span { font-size: var(--t-small); line-height: 1.4; color: var(--ink-soft); }
.pays__amt { display: grid; justify-items: end; gap: 0.2rem; font: 500 1.0625rem / 1 var(--mono); color: var(--navy); white-space: nowrap; }
.pays__amt small { font: 500 var(--t-micro) / 1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.pays__row.is-paid .pays__mark { border: 0; background-color: var(--navy); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23F7F2E8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pays__row.is-failed, .pays__row.is-now { box-shadow: inset 0 0 0 1.5px var(--coral-deep), var(--sh-1); }
.pays__row.is-failed .pays__mark, .pays__row.is-now .pays__mark { border: 0; background-color: var(--coral); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v5.5M8 12v.5' fill='none' stroke='%230F1830' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.pays__row.is-failed .pays__amt small, .pays__row.is-now .pays__amt small { color: var(--coral-deep); }
.pays__row.is-off { opacity: 0.7; }
.owe { display: grid; gap: var(--s-4); padding: clamp(1.25rem, 4vw, 2rem); border-radius: var(--r-l); box-shadow: var(--sh-2); }
.owe__bar { height: 0.6rem; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.owe__bar span { display: block; height: 100%; border-radius: inherit; background: var(--coral); }
.owe.is-clear .owe__bar span { background: var(--navy); }
.my-pay { margin-top: var(--s-2); padding-top: var(--s-4); border-top: 2px dashed var(--line-strong); }
.my-pay__next { display: grid; gap: 0.2rem; }
.my-pay__next strong { font: 400 1.25rem / 1.25 var(--serif); color: var(--navy); }
.ce-card { display: grid; gap: var(--s-6); align-items: center; }
.ce-card__stamp { justify-self: start; }
@media (min-width: 56.25em) { .ce-card { grid-template-columns: auto minmax(0, 1fr); gap: clamp(3rem, 8vw, 7rem); } .ce-card .lead { max-width: 44rem; } }

.ce-card__wait { display: flex; }

/* ---------- 5b. The portal: checklist, announcements, materials, one task ---------- */
/* the progress count: a figure and a slim line */
.pprog { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.pprog__n { font: 500 var(--t-mono, 0.8125rem) / 1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.pprog__n strong { color: var(--navy); font-weight: 600; }
.pprog__bar span { background: var(--navy); }
/* the checklist reads like a travel document being stamped: one paper line per step, a round mark that turns
   into a stamp when the step is done. Nothing moves on hover. */
.plist { display: grid; gap: var(--s-2); list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.plist__row { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--s-3) var(--s-4); align-items: start; padding: 1rem 1.1rem; border-radius: var(--r-m); background: var(--paper); box-shadow: var(--sh-1); }
.plist__mark { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px dashed var(--line-strong); font: 500 0.8125rem / 1 var(--mono); letter-spacing: 0.06em; color: var(--ink-soft); background: center / 1.3rem no-repeat; }
.plist__what { display: grid; gap: 0.2rem; min-width: 0; }
.plist__state { font: 500 var(--t-micro) / 1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.plist__title { font: 400 1.25rem / 1.25 var(--serif); letter-spacing: -0.01em; color: var(--navy); overflow-wrap: anywhere; }
.plist__when { font-size: var(--t-small); line-height: 1.45; color: var(--ink-soft); }
.plist__text { margin-top: 0.35rem; font-size: var(--t-small); line-height: 1.5; color: var(--ink); max-width: 38rem; }
.plist__act { grid-column: 2; display: flex; align-items: center; min-width: 0; }
.plist__row.is-done .plist__mark { border: 2px solid var(--coral-deep); outline: 1.5px dashed var(--coral-deep); outline-offset: 2px; transform: rotate(-9deg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23B84A36' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plist__row.is-done .plist__state { color: var(--coral-deep); }
.plist__row.is-open .plist__mark { border: 1.5px solid var(--navy); color: var(--navy); }
.plist__row.is-overdue { box-shadow: inset 0 0 0 1.5px var(--coral-deep), var(--sh-1); }
.plist__row.is-overdue .plist__mark { border: 0; background-color: var(--coral); color: var(--navy); }
.plist__row.is-overdue .plist__state { color: var(--coral-deep); }
.plist__row.is-next { padding-block: 1.25rem; box-shadow: inset 0 0 0 1.5px var(--navy), var(--sh-2); }
.plist__row.is-next.is-overdue { box-shadow: inset 0 0 0 1.5px var(--coral-deep), var(--sh-2); }
.plist__row.is-locked { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.plist__row.is-locked .plist__title { color: var(--ink-soft); }
@media (min-width: 40em) {
  .plist__row { grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; }
  .plist__act { grid-column: auto; justify-content: flex-end; }
}
/* announcements: dated notes on paper, newest first */
.pposts { display: grid; gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
.ppost { display: grid; gap: 0.35rem; padding: 1.1rem 1.25rem; border-radius: var(--r-m); background: var(--paper); box-shadow: var(--sh-1); border-left: 4px solid var(--gold); min-width: 0; }
.ppost__date { font: 500 var(--t-micro) / 1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.ppost__title { font: 400 1.3125rem / 1.25 var(--serif); letter-spacing: -0.01em; color: var(--navy); overflow-wrap: anywhere; }
.ppost__body { display: grid; gap: 0.6rem; font-size: var(--t-body, 1rem); line-height: 1.55; color: var(--ink); max-width: 42rem; overflow-wrap: anywhere; }
/* materials: one line per link or download */
.pres { display: grid; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.pres__row { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s-2) var(--s-4); align-items: start; padding: 0.9rem 1.1rem; border-radius: var(--r-m); background: var(--paper); box-shadow: var(--sh-1); }
.pres__mark { width: 2.25rem; height: 2.25rem; border-radius: var(--r-s, 0.5rem); background: rgb(var(--navy-rgb) / 0.07) center / 1.1rem no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 9.5l3-3M7 4.5l1-1a3.2 3.2 0 0 1 4.5 4.5l-1 1M9 11.500l-1 1A3.2 3.2 0 0 1 3.500 8l1-1' fill='none' stroke='%230F1830' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.pres__row.is-file .pres__mark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.500v7.500M5 7.500l3 3 3-3M3 13.500h10' fill='none' stroke='%230F1830' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pres__what { display: grid; gap: 0.15rem; min-width: 0; }
.pres__title { font: 400 1.1875rem / 1.25 var(--serif); letter-spacing: -0.01em; color: var(--navy); overflow-wrap: anywhere; }
.pres__note { font-size: var(--t-small); line-height: 1.45; color: var(--ink-soft); }
.pres__meta { font: 500 var(--t-micro) / 1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.pres__act { grid-column: 2; display: flex; align-items: center; min-width: 0; }
@media (min-width: 40em) {
  .pres__row { grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; }
  .pres__act { grid-column: auto; justify-content: flex-end; }
}
/* one task: a paper form */
.ptask { display: grid; gap: var(--s-5); padding: clamp(1.25rem, 4vw, 2.25rem); border-radius: var(--r-l); box-shadow: var(--sh-2); min-width: 0; }
.ptask__grid { align-items: start; }
.ptask__grid > * { min-width: 0; }
.ptask__grid .field--full, .ptask__grid .choices-field { grid-column: 1 / -1; }
.ptask__file { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; grid-column: 1 / -1; font-size: var(--t-small); overflow-wrap: anywhere; min-width: 0; }
.ptask__file-rm.check { align-items: center; gap: 0.5rem; margin-left: auto; padding: 0; white-space: nowrap; }      /* the tick "Remove" beside a file on file: the site's own tick box */
.ptask__file-rm.check input { margin: 0; }
.ptask__file-mark { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--navy) center / 0.8rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23F7F2E8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ptask__nav { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5); align-items: center; padding-top: var(--s-5); border-top: 2px dashed var(--line-strong); }

/* ---------- 6. The CE portal ---------- */
.portal { display: grid; gap: var(--s-6); }
.portal__door { position: relative; width: 7.5rem; aspect-ratio: 3 / 5; border-radius: 4rem 4rem 0 0; background: var(--navy); box-shadow: inset 0 0 0 0.45rem var(--navy), inset 0 0 0 0.55rem var(--gold), 0.8rem 0.8rem 0 var(--coral); }
.portal__door span { position: absolute; right: 1.2rem; top: 56%; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--gold); }
@media (min-width: 48em) { .portal { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-8); align-items: start; } .portal__door { width: 9.5rem; } }

/* ---------- 7. The shop ---------- */
.shop-grid { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); list-style: none; }
@media (min-width: 30em) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56.25em) { .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .shop-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* a product as a print pinned to the wall, a little crooked until you reach for it */
.shop-card { position: relative; display: flex; flex-direction: column; padding: 0.7rem 0.7rem 1.1rem; border-radius: var(--r-xs); background: var(--paper); color: var(--ink); box-shadow: var(--sh-2); rotate: var(--tilt, 0deg); transition: rotate 0.7s var(--ease-back), translate 0.5s var(--ease), box-shadow 0.5s var(--ease); --head: var(--navy); --fg-soft: var(--ink-soft); --btn-bg: var(--coral); --btn-fg: var(--navy-deep); --btn-bg-hover: var(--coral-light); --btn2: var(--navy); --btn2-hover-fg: var(--cream); --focus: var(--navy); }
.shop-card:nth-child(even) { margin-top: var(--s-5); }
.shop-card:hover, .shop-card:focus-within { rotate: 0deg; translate: 0 -6px; box-shadow: var(--sh-3); z-index: 2; }
.shop-card__pic { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 2px; background: var(--cream); }
.shop-card__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.shop-card:hover .shop-card__pic img { transform: scale(1.05); }
.shop-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--s-3); padding: var(--s-4) 0.4rem 0; }
.shop-card__name { font: 400 var(--t-s) / 1.15 var(--serif); letter-spacing: -0.01em; color: var(--navy); }
.shop-card__name a { text-decoration: none; }
.shop-card__name a:hover { text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 0.2em; }
.shop-card__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.shop-add { margin-top: auto; }
.shop-add--qty { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-4); margin-top: 0; }
.shop-qty { width: 6.5rem; }
.shop-out { margin-top: auto; }
.shop-note { display: grid; gap: var(--s-3); max-width: 50rem; }
.product__pic { padding: 0 1rem 1rem 0; }
.product__words .eyebrow a { text-decoration: underline; text-decoration-color: var(--link-line); }
.product__words .demo-line { justify-content: flex-start; }

.cart-grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 62.5em) { .cart-grid { grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem); gap: clamp(2rem, 4vw, 4rem); } }
.cart-rows { display: grid; gap: var(--s-4); list-style: none; }
.cart-row { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; gap: var(--s-3) var(--s-4); align-items: center; padding: 0.9rem; border-radius: var(--r-m); background: var(--paper); box-shadow: var(--sh-1); }
.cart-row__pic { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-xs); background: var(--cream); }
.cart-row__pic img { width: 100%; height: 100%; object-fit: cover; }
.cart-row__what { grid-column: 2 / -1; min-width: 0; }
.cart-row__name { font: 400 var(--t-s) / 1.2 var(--serif); letter-spacing: -0.01em; }
.cart-row__name a { text-decoration: none; }
.cart-row__each { font: 500 var(--t-mono) / 1.5 var(--mono); color: var(--ink-soft); }
.cart-row__qty { grid-column: 1 / span 2; display: flex; align-items: center; gap: var(--s-3); }
.cart-row__qty .field { width: 5.5rem; }
.cart-row__qty .field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.js .cart-row__qty[data-auto] .cart-row__update { display: none; }
.cart-row__total { justify-self: end; font: 500 1.125rem / 1 var(--mono); color: var(--navy); }
.cart-row__out { grid-column: 1 / -1; justify-self: end; margin-top: -0.4rem; }
.cart-row__remove { min-height: 2.75rem; padding: 0 0.25rem; border: 0; background: none; color: var(--ink-soft); font: 500 var(--t-small) / 1 var(--sans); text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 0.25em; }
.cart-row__remove:hover { color: var(--navy); text-decoration-thickness: 2px; }
@media (min-width: 40em) {
  .cart-row { grid-template-columns: 6.5rem minmax(0, 1fr) auto auto auto; padding: 1rem 1.25rem 1rem 1rem; gap: var(--s-5); }
  .cart-row__what, .cart-row__qty, .cart-row__out { grid-column: auto; }
  .cart-row__out { margin-top: 0; }
  .cart-row__total { min-width: 4.5rem; text-align: right; }
}
.cart-sum .eyebrow { margin-bottom: var(--s-3); }
.co__set { display: grid; gap: var(--s-4); }
.co__set > legend { margin-bottom: var(--s-4); }
.order__ticket .rows { margin-top: var(--s-2); }
.order__addr { font: 400 1.125rem / 1.45 var(--serif); color: var(--navy); }

/* ---------- 8. Reduced motion and print ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .reg.is-stepper .leg, html.js .sched.is-new .sched__row, .rpass .is-flash { animation: none !important; }
  .shop-card, .shop-card:hover, .shop-card:focus-within { rotate: var(--tilt, 0deg); translate: none; transition: none; }
  .shop-card__pic img { transition: none; transform: none !important; }
}
@media print {
  .reg-bar, .leg__nav, .reg-side__links, .shop-add, .cart-row__out, .my-pay .btn { display: none !important; }
}

/* ----------------------------------------------------------------------------------------------------
   8. The packet of 2026-10 (rooms, the short checkout, the five policies, the portal's new blocks).
      Everything here stands still: no hover change, nothing fixed or sticky, nothing wider than the page.
   ---------------------------------------------------------------------------------------------------- */
.air-note { margin: 0 0 var(--s-5); padding: 0.9rem 1.1rem; border-radius: var(--r-m); background: var(--paper, #fff); box-shadow: inset 0 0 0 1.5px var(--coral-deep); color: var(--navy-deep); font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.air-note strong { font-weight: 600; }
.air-note.is-confirmed { box-shadow: inset 0 0 0 1.5px var(--navy); }
.my-block .air-note { margin: 0; }
.reg-says { margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
.reg-says--lead { font-size: 1rem; color: var(--navy-deep); }
.reg-only--says { grid-column: 1 / -1; }
.reg-later { grid-column: 1 / -1; margin: 0; padding-top: var(--s-3); border-top: 1px solid var(--line-strong); font-size: var(--t-small); line-height: 1.5; color: var(--ink-soft); }
.reg-addon__more { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid rgb(0 0 0 / 0.18); }
.reg-addon__more[hidden] { display: none; }
.reg-addon__said { font-size: var(--t-small); line-height: 1.5; }
.reg-addon__said strong { margin-right: 0.35em; }
.reg-policies .check { align-items: flex-start; }
.reg-policies .check span { min-width: 0; overflow-wrap: anywhere; line-height: 1.6; }
.reg-policies a { text-decoration: underline; text-underline-offset: 0.15em; }
.reg-policies__after { margin-top: calc(-1 * var(--s-3)); color: var(--ink-soft); }
.review__who dd { min-width: 0; overflow-wrap: anywhere; text-align: right; }
.my-room__words, .my-room__guest { margin: 0; max-width: 62ch; line-height: 1.6; overflow-wrap: anywhere; }
/* naming the roommate while waiting for one (the form reuses .my-comp__form) */
.my-room__form { margin-top: var(--s-5); max-width: 40rem; }
.my-room__hint { margin: 0; max-width: 62ch; font-size: var(--t-small); color: var(--fg-soft); }
.my-room__guest { margin-top: var(--s-3); }
.my-figs { margin-bottom: var(--s-5); padding: 0.9rem 1.1rem; border-radius: var(--r-m); background: var(--paper, #fff); box-shadow: var(--sh-1); }
.my-figs dd { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.my-figs__next dd { font-size: var(--t-small); line-height: 1.5; }
.my-pol__list { display: grid; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.my-pol__list li { display: grid; gap: 0.1rem; padding: 0.8rem 1.1rem; border-radius: var(--r-m); background: var(--paper, #fff); box-shadow: var(--sh-1); min-width: 0; }
.my-pol__list strong { font: 400 1.125rem / 1.3 var(--serif); color: var(--navy); }
.my-pol__list span { font-size: var(--t-small); line-height: 1.4; color: var(--ink-soft); overflow-wrap: anywhere; }
.my-pol__form { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
.my-pol__form .btn { min-height: 44px; }

/* 2026-10-04, the lead's notes after publishing: the information step of the portal, and Double Room after the roommate deadline */
.ptask__onfile { display: grid; gap: var(--s-3); padding: 1rem 1.1rem; border-radius: var(--r-m); border: 2px dashed var(--line-strong); min-width: 0; }
.ptask__onfile p { margin: 0; overflow-wrap: anywhere; }
.ptask__carried { margin: 0; min-width: 0; }
.ptask__carried dt, .ptask__carried dd { overflow-wrap: anywhere; min-width: 0; }
.ptask__nav .btn { min-height: 44px; }
.reg-says[hidden] { display: none; }
.reg-says--room { margin-top: 0.6rem; font-weight: 600; color: var(--navy-deep); overflow-wrap: anywhere; }
.reg-says--room.is-bad { color: var(--coral-deep); }

/* ----------------------------------------------------------------------------------------------------
   9. The portal forms of 2026-10-04: new field types, the release, the final review, the companion's card and
      own page, the request to cancel or transfer. Phone first (390 px): one column, long values wrap, nothing
      fixed or sticky, and on a portal page nothing moves under the pointer: a button changes its colour only.
   ---------------------------------------------------------------------------------------------------- */
.page--my .btn, .page--my .choice__box { translate: none !important; }
.page--my .btn .arrow { transform: none !important; }
.ptask__grid .field--checkbox { grid-column: 1 / -1; }
.ptask__grid .check span, .my-req .check span { min-width: 0; overflow-wrap: anywhere; }
.ptask__grid .field__label, .ptask__grid .field__hint, .my-req .field__label { overflow-wrap: anywhere; }
.ptask__grid input[type="time"], .ptask__grid input[type="date"] { min-width: 0; max-width: 100%; }
.plist__row.is-held .plist__mark { border-style: dotted; }
.plist__gap { color: var(--coral-deep); }

/* a release: the wording in a box that reads like a page, then the signature */
.prel { display: grid; gap: var(--s-3); padding: clamp(1rem, 4vw, 1.75rem); border-radius: var(--r-m); background: var(--cream); box-shadow: inset 0 0 0 1.5px var(--line-strong); min-width: 0; }
.prel__text { display: grid; gap: 0.8rem; max-width: 62ch; font-size: 1rem; line-height: 1.65; color: var(--ink); overflow-wrap: anywhere; }
.prel__text p { margin: 0; }
.prel__signed { display: flex; gap: var(--s-3); align-items: center; margin: 0; font: 400 1.25rem / 1.3 var(--serif); color: var(--navy); overflow-wrap: anywhere; min-width: 0; }
.prel__signed span:last-child { min-width: 0; }

/* the final review: everything on file in groups, then what is still outstanding */
.prev { display: grid; gap: var(--s-3); min-width: 0; }
.prev__group { display: grid; gap: var(--s-2); padding: 1rem 1.1rem; border-radius: var(--r-m); box-shadow: inset 0 0 0 1.5px var(--line); min-width: 0; }
.prev__group--out { box-shadow: inset 0 0 0 1.5px var(--navy); }
.prev__title { font: 400 1.25rem / 1.25 var(--serif); letter-spacing: -0.01em; color: var(--navy); overflow-wrap: anywhere; }
.prev__rows { margin: 0; min-width: 0; }
.prev__rows > div { flex-wrap: wrap; gap: 0.15rem var(--s-4); }
.prev__rows dt, .prev__rows dd { min-width: 0; overflow-wrap: anywhere; }
.prev__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); margin: 0; font-size: var(--t-small); color: var(--ink-soft); }
.prev__out li { box-shadow: inset 0 0 0 1px var(--line); }
.prev__out .btn { justify-self: start; }

/* the card "Your companion" on the attendee's portal */
.my-comp__who { margin: 0 0 var(--s-4); max-width: 62ch; line-height: 1.6; overflow-wrap: anywhere; }
.my-comp__n { margin: 0 0 var(--s-3); }
.my-comp__steps { margin-bottom: var(--s-4); }
.my-comp__share { display: grid; gap: var(--s-3); padding: 1rem 1.1rem; min-width: 0; }
.my-comp__share > p { margin: 0; overflow-wrap: anywhere; }
.my-comp__url { padding: 0.7rem 0.95rem; border: 1.5px dashed var(--line-strong); border-radius: var(--r-s); font: 500 var(--t-small) / 1.5 var(--mono); color: var(--navy-deep); overflow-wrap: anywhere; word-break: break-all; user-select: all; -webkit-user-select: all; }
.my-comp__copy { justify-self: start; }
.my-comp__form { display: grid; gap: var(--s-4); min-width: 0; }
.my-comp__form .btn, .my-req .btn { min-height: 44px; }

/* the request to cancel or to transfer, a paper card in the terms band */
.my-req { display: grid; gap: var(--s-4); margin-top: var(--s-6); padding: clamp(1.1rem, 4vw, 1.75rem); min-width: 0; }
/* the request box runs the width of the section: what is asked on the left, their own words and the button on the right */
.my-req__cols, .my-req__say { display: grid; gap: var(--s-4); min-width: 0; align-content: start; }
@media (min-width: 62em) { .my-req .my-req__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); align-items: start; } }
@media (max-width: 61.99em) { .my-req { max-width: 46rem; } }
.my-req__title { font: 400 1.5rem / 1.2 var(--serif); letter-spacing: -0.01em; color: var(--navy); }
.my-req__form { display: grid; gap: var(--s-4); min-width: 0; }
.my-req__form > p, .my-req > p { margin: 0; }
.my-req__note { font-size: var(--t-small); line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
.my-req__form .field[hidden], .ptask__grid .field[hidden] { display: none; }

/* the companion's own page: one column, no payments beside it */
.my-main--one { max-width: 52rem; }


/* ---------- "Your portal": the page behind the icon in the header ---------- */
.portal-ask { margin-top: var(--s-4); }
.portal-ask > p { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3); }
/* "Your portal" in two parts (sign in with a password; the links by email): the second part starts under a line, like the foot of the card */
.ptask > .portal-ask + .display, .ptask > .pres + .display { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 2px dashed var(--line-strong); }
.ptask > .portal-ask + .portal-ask { margin-top: var(--s-5); }

/* Checkout, "Your own schedule": how many payments, then a date and an amount for each (her answer of Oct 5) */
.own { margin: var(--s-5) 0 0; padding: var(--s-5); border: 1.5px solid var(--line-strong); border-radius: var(--r-m); background: var(--paper, #fff); min-width: 0; }
.own[hidden] { display: none; }
.own__says { margin: 0 0 var(--s-4); }
.own__error { margin: 0 0 var(--s-4); }
.own__n { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); align-items: flex-end; margin-bottom: var(--s-4); }
.own__n .field { max-width: 13rem; margin: 0; }
.own__n > p { margin: 0; }
.own__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.own__row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); align-items: end; }
.own__k { align-self: center; padding-top: 1.2rem; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
.own__f { display: grid; gap: 0.3rem; font-size: var(--t-small); min-width: 0; }
.own__f .input { width: 100%; min-width: 0; }
.own__money { display: flex; align-items: center; gap: 0.4rem; }
.own__left { margin: var(--s-4) 0 0; font-weight: 600; color: var(--navy); }
.own__left:empty { display: none; }
.own__left.is-bad { color: var(--coral-deep); }
@media (max-width: 30rem) {
  .own { padding: var(--s-4); }
  .own__row { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .own__row .own__f:last-child { grid-column: 2; }
}

/* Change my payment schedule (her answer of 2026-10-06): the page uses the rows of the checkout (.own) */
.sched-form .own { margin-top: 0; }
.sched-now { display: grid; gap: var(--s-2); min-width: 0; }
.sched-now__list { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.2rem; font-variant-numeric: tabular-nums; }
.sched-form__go { gap: var(--s-3); }
.my-pays__change { margin: var(--s-4) 0 0; }

/* Card payments (lib/stripe.php): the words under a pay button, and the card on file with the way to change it */
.pay__note { margin: var(--s-2) 0 0; }
.my-card { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px dashed var(--line-strong); display: grid; gap: var(--s-2); justify-items: start; }
.my-card p { margin: 0; }