/* Hallmark · shape: Catalogue (by request; the draw dealt Feature Stack) · genre: modern-minimal · theme: Coral (by request) · job: book · draw: 13c73e
 * hero: Counter · nav: edge-aligned · footer: statement · imagery: photographs, the hostal's own (the terrace print, a nine-photo house mosaic, the room cards and the front on the home) · signature: the booking slip laid on the felt desk over a print of the terrace, dates set large and the price per night at its head
 * axes: light/grotesk-sans/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a booking box fits any hotel; tied it to this house with the terrace print under the slip, the seven-night pills from the real calendar and the one real review as an index card */
/* Hallmark · waive 49b · the room names wrap to two lines in the phone cards · Habitación con cama grande is the hostal's own name for the room and cannot shorten */
/* Hallmark · dismissed F25 · the room column, which holds the link to each room, is pinned while the figures scroll beside it */
/* Hallmark · dismissed 11 · the 1px lift is Coral's letterpress control press, on the buttons and the night pills only; the room cards underline their name instead */
/* Hallmark · answered F4 · one filled ink primary; the cotton card is Coral's secondary control, never a second fill colour */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --tex-cotton: url("/temas/coral/cotton.svg"); --tex-desk: url("/temas/coral/felt.svg");
  --bar-h: 72px;
}

/* Paper objects: one light from the left, the cast falls right. */
.stock { background-color: var(--color-cotton); background-image: linear-gradient(100deg, var(--color-cotton), transparent 45%), var(--tex-cotton); color: var(--color-print); border-radius: var(--radius-stock); box-shadow: var(--edge-stock), var(--cast-stock); }
.desk { background-color: var(--color-desk); background-image: radial-gradient(90% 120% at 0% 30%, var(--color-cotton), transparent 62%), var(--tex-desk); }

a:hover { text-decoration-color: var(--color-accent-2); }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-input); }
.skip:focus-visible { top: var(--space-md); }

/* Controls: letterpress cards, the primary in ink. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-stock); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.btn--ink { background: var(--color-board); color: var(--color-board-type); text-shadow: 0 -0.75px 0 var(--color-ink); box-shadow: var(--cast-stock); }
.btn--card { background-color: var(--color-cotton); background-image: var(--tex-cotton); color: var(--color-print); text-shadow: 0.5px 0.75px 0 var(--color-cotton); box-shadow: var(--edge-stock), var(--cast-stock); }
.btn:hover { transform: translateY(-1px); box-shadow: var(--edge-stock), var(--cast-stock-lift); }
.btn:active { transform: translateY(1px); box-shadow: var(--edge-stock); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Nav: the wordmark at one edge, two links and the action at the other. */
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }
.bar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: var(--bar-h); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; font: 600 var(--text-lg)/1 var(--font-display); letter-spacing: var(--tracking-display); text-decoration: none; white-space: nowrap; }
.bar__nav { display: flex; align-items: center; gap: var(--space-2xs); }
.bar__nav > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-sm); font-weight: 500; text-decoration: none; white-space: nowrap; }
.bar__nav > a:not(.btn):hover { text-decoration: underline; text-decoration-color: var(--color-accent-2); }
.bar__book { margin-left: var(--space-xs); min-height: 44px; padding-inline: var(--space-md); }
@media (max-width: 40rem) { .bar__far { display: none !important; } .bar__nav > a:not(.btn) { padding-inline: var(--space-xs); } }

/* The booking slip. */
.slip { display: grid; gap: var(--space-md); padding: var(--space-lg) var(--space-md); }
.slip__price { display: flex; align-items: baseline; gap: var(--space-xs); color: var(--color-muted); font-weight: 500; padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.slip__fig { color: var(--color-print); font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 600; letter-spacing: -0.05em; line-height: 0.85; }
.slip__dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.slip__field label, .seg legend { display: block; margin-bottom: var(--space-2xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.slip__field input { width: 100%; min-height: 52px; padding: 0 var(--space-xs); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-cotton); color: var(--color-print); font-size: clamp(1rem, 0.8rem + 0.8vw, 1.375rem); font-weight: 500; outline: 2px solid transparent; outline-offset: -3px; }
.slip__field input:hover { border-color: var(--color-ink-2); }
.slip__field input:focus-visible { outline-color: var(--color-focus); }
.slip__field input:disabled { opacity: 0.55; cursor: not-allowed; }
.slip__go { width: 100%; min-height: 52px; font-size: var(--text-lg); }
.slip__note { font-size: var(--text-sm); color: var(--color-muted); }
.slip__note output { color: var(--color-print); font-weight: 500; }
@media (min-width: 40rem) { .slip { padding: var(--space-xl); gap: var(--space-lg); } .slip__field input { padding: 0 var(--space-sm); } }

/* A choice of three: a groove pressed into the cotton, a card riding in it. */
.seg { margin: 0; padding: 0; border: 0; min-width: 0; }
.seg__groove { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2xs); padding: var(--space-2xs); border-radius: 12px; background: var(--color-paper-2); box-shadow: var(--press-groove); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.seg label { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: var(--radius-stock); font-size: var(--text-lg); font-weight: 500; color: var(--color-ink-2); cursor: pointer; transition: transform var(--dur-micro) var(--ease-out); }
.seg label:hover { color: var(--color-print); background: var(--color-paper-3); }
.seg input:checked + label { background-color: var(--color-cotton); color: var(--color-print); box-shadow: var(--edge-stock), var(--cast-stock); }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.seg label:active { transform: translateY(1px); }
.seg input:disabled + label { opacity: 0.55; cursor: not-allowed; }

/* Hero: the counter. The terrace print is the big thing; the slip is laid over its edge. */
.hero { padding-block: var(--space-lg) var(--space-xl); }
.hero__in { display: grid; gap: var(--space-lg); }
.hero__text { display: grid; gap: var(--space-md); }
/* Sized so "habitaciones" always fits its column whole: 36px on phones, about 54px at 1280. */
.hero h1 { max-width: none; font-size: clamp(2.25rem, 1rem + 3vw, 4.25rem); }
.print { aspect-ratio: 4 / 3; margin: 0; border: 8px solid var(--color-cotton); border-radius: 4px; box-shadow: var(--edge-stock), var(--cast-stock); }
@media (min-width: 60rem) {
  .hero { display: grid; align-items: center; min-height: calc(100dvh - var(--bar-h)); padding-block: var(--space-lg); }
  .hero__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "text print" "slip print"; gap: var(--space-lg) var(--space-2xl); align-items: start; }
  .hero__text { grid-area: text; gap: var(--space-lg); align-self: end; }
  .print { grid-area: print; align-self: stretch; aspect-ratio: auto; min-height: 30rem; border-width: 12px; box-shadow: var(--edge-stock), var(--cast-stock-lift); transform: rotate(1.5deg); }
  .hero__in > .slip { grid-area: slip; position: relative; z-index: var(--z-raised); justify-self: end; width: min(100%, 28rem); margin-right: calc(-1 * (var(--space-2xl) + var(--space-xl))); }
}

/* Free nights: soft pills off the real calendar. */
.free { padding-block: var(--space-2xl) var(--section-gap-s); }
.free__head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.free__head p { color: var(--color-ink-2); }
.pills { display: grid; grid-auto-flow: column; grid-auto-columns: 9.5rem; gap: var(--space-sm); margin: 0; padding: var(--space-2xs) var(--space-2xs) var(--space-md); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; }
.pills > li { scroll-snap-align: start; }
.pill { display: grid; justify-items: center; gap: var(--space-3xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-pill); background-color: var(--color-cotton); background-image: var(--tex-cotton); color: var(--color-print); box-shadow: var(--edge-stock), var(--cast-stock); text-decoration: none; transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.pill:hover { transform: translateY(-1px); box-shadow: var(--edge-stock), var(--cast-stock-lift); }
.pill:active { transform: translateY(1px); }
.pill:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.pill__day { font-size: var(--text-lg); font-weight: 600; white-space: nowrap; }
.pill__from { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
@media (min-width: 75rem) { .pills { grid-auto-flow: row; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: visible; } }

/* Rooms as products, and the comparison. */
.rooms { padding-block: var(--section-gap); background: var(--color-paper-2); }
.rooms__head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.prods { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg) var(--gap-columns); }
.prod { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); overflow: hidden; }
.prod:hover .prod__name a { text-decoration: underline; text-decoration-color: var(--color-accent-2); }
.prod__photo { min-height: 10rem; margin: 0; }
.prod__text { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-md); }
.prod__name { font-size: var(--text-title); }
.prod__name a { text-decoration: none; }
.prod__name a::after { content: ""; position: absolute; inset: 0; z-index: var(--z-raised); border-radius: var(--radius-stock); }
.prod__name a:focus-visible { outline: 0; }
.prod__name a:focus-visible::after { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.prod__beds { color: var(--color-ink-2); }
.prod__price { margin-top: var(--space-xs); color: var(--color-muted); }
.prod__price b { color: var(--color-print); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.03em; }
@media (min-width: 40rem) { .prods { grid-template-columns: repeat(2, minmax(0, 1fr)); } .prod { grid-template-columns: none; grid-template-rows: auto 1fr; } .prod__photo { min-height: 0; aspect-ratio: 4 / 3; } .prod__text { padding: var(--space-lg); } }
@media (min-width: 75rem) { .prods { grid-template-columns: repeat(4, minmax(0, 1fr)); } .prods--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.compare { margin-top: var(--space-3xl); overflow-x: auto; }
.compare:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.compare table { width: 100%; min-width: 46rem; border-collapse: collapse; }
.compare caption { margin-bottom: var(--space-md); text-align: left; font: 600 var(--text-title)/1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.compare th, .compare td { padding: var(--space-md) var(--space-sm); border-bottom: 1px solid var(--color-rule-2); text-align: left; vertical-align: baseline; }
.compare thead th { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); white-space: nowrap; }
.compare tbody th { font-weight: 600; white-space: nowrap; }
.compare tbody th a { display: inline-flex; align-items: center; min-height: 44px; }
.compare th:first-child { position: sticky; left: 0; background: var(--color-paper-2); padding-left: 0; }
.fig { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; white-space: nowrap; }

.compare .fill { font-size: var(--text-sm); }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); font-family: var(--font-body); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* The house: the best photographs as a mosaic; landscape ones take two columns. */
.casa { padding-block: var(--section-gap) var(--section-gap-s); }
.casa__head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--space-lg) var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.mosaic__item--wide { grid-column: span 2; }
.mosaic figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-xs); height: 100%; margin: 0; }
.mosaic__ph { aspect-ratio: 3 / 4; border-radius: var(--radius-card); }
.mosaic__item--wide .mosaic__ph { aspect-ratio: 3 / 2; }
.mosaic figcaption { font-size: var(--text-sm); color: var(--color-ink-2); }
@media (min-width: 60rem) {
  .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mosaic__item--wide .mosaic__ph { aspect-ratio: auto; }
}

/* The house and the one real review. */
.house { padding-block: var(--section-gap-s) var(--section-gap); }
.house__in { display: grid; gap: var(--space-2xl); }
.rows { margin: var(--space-xl) 0 0; }
.rows > div { display: grid; gap: var(--space-2xs); padding-block: var(--space-md); border-top: 1px solid var(--color-rule-2); }
.rows dt { font-size: var(--text-title); font-weight: 600; letter-spacing: -0.02em; }
.rows dd { margin: 0; color: var(--color-ink-2); }
.note { margin: 0; padding: var(--space-xl) var(--space-lg); transform: rotate(-1.2deg); }
.note blockquote { margin: 0; }
.note p { font-size: var(--text-2xl); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; text-indent: -0.4em; }
.note figcaption { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
@media (min-width: 40rem) { .rows > div { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: baseline; } .note { padding: var(--space-2xl) var(--space-xl); } }
@media (min-width: 60rem) { .house__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; } }

/* The board: reception hours and the way there. */
.board { padding-block: var(--section-gap-s); background: var(--color-board); color: var(--color-board-type); }
.board__in { display: grid; gap: var(--space-2xl); }
.board h2 { color: var(--color-board-type); }
.board__addr { margin-top: var(--space-lg); font-style: normal; font-size: var(--text-lead); line-height: 1.45; }
.board__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }
.board .btn--card { box-shadow: var(--edge-stock), 6px 6px 14px -6px oklch(var(--deep) / 0.7); }
.board__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-board-type); text-decoration-color: var(--color-accent); }
.board :focus-visible { outline-color: var(--color-board-type); }
.hours { width: 100%; border-collapse: collapse; align-self: center; }
.hours caption { margin-bottom: var(--space-sm); text-align: left; font-size: var(--text-sm); font-weight: 500; }
.hours th, .hours td { padding: var(--space-md) 0; border-top: 1px solid color-mix(in oklch, var(--color-board-type) 22%, transparent); font-size: var(--text-lead); }
.hours th { text-align: left; font-weight: 500; }
.hours td { text-align: right; }
@media (min-width: 60rem) { .board__in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; } .hours { grid-column: 2; } }

/* Close: the booking beside the house. */
.close { padding-block: var(--section-gap-l) var(--section-gap); }
.close__in { display: grid; gap: var(--space-2xl); }
.close__photo { aspect-ratio: 4 / 5; margin: 0; border-radius: var(--radius-card); }
.close__text { display: grid; gap: var(--space-xl); align-content: center; }
.close__text .slip { max-width: 32rem; }
.steps { display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: baseline; font-size: var(--text-lead); }
.steps li::before { content: counter(s); font: 600 var(--text-2xl)/1 var(--font-display); }
@media (min-width: 60rem) { .close__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; } .close__photo { min-height: 440px; } }

/* Footer: one closing sentence, the facts beneath. */
.foot { padding-block: var(--section-gap-s) var(--space-2xl); border-top: 1px solid var(--color-rule); }
.foot__line { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); max-width: 22ch; font: 600 var(--text-section)/1.05 var(--font-display); letter-spacing: var(--tracking-display); text-wrap: balance; }
.foot__line .logo-mark { flex-shrink: 0; }
.foot__cols { display: grid; gap: var(--space-xl); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.foot address { font-style: normal; line-height: 1.8; }
.foot nav { display: grid; align-content: start; }
.foot nav a, .foot address a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 60rem) { .foot__cols { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--gap-columns); } }

/* The phone dock: price and a jump to the dates. */
.dock { position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom)); background-color: var(--color-cotton); background-image: var(--tex-cotton); color: var(--color-print); box-shadow: 0 -1px 0 var(--color-rule-2), 0 -6px 16px -10px oklch(var(--shade) / 0.35); transition: transform var(--dur-short) var(--ease-out); }
.dock p { color: var(--color-muted); font-size: var(--text-sm); }
.dock__fig { color: var(--color-print); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.03em; }
.dock.is-away { transform: translateY(110%); }
.has-dock .foot { padding-bottom: var(--space-4xl); }
@media (min-width: 60rem) { .dock { display: none; } .has-dock .foot { padding-bottom: var(--space-2xl); } }

/* Room page. */
.offer { padding-block: var(--space-md) var(--section-gap-s); }
.offer__in { display: grid; gap: var(--space-lg); }
.offer__photo { aspect-ratio: 4 / 3; margin: 0; border-radius: var(--radius-card); }
.offer__text { display: grid; gap: var(--space-md); align-content: start; }
.offer h1 { font-size: var(--text-display-s); max-width: 16ch; }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); }
@media (min-width: 60rem) {
  .offer { padding-block: var(--space-lg); }
  .offer__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
  .offer__photo { aspect-ratio: auto; height: calc(100dvh - var(--bar-h) - 2 * var(--space-lg)); min-height: 440px; max-height: 760px; }
  .offer h1 { font-size: clamp(2.25rem, 1.5rem + 1.6vw, 3.25rem); }
}

.gallery { padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.gallery h2 { margin-bottom: var(--space-xl); }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 78%); gap: var(--gap-columns); margin: 0; padding: var(--space-2xs) max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) var(--space-lg); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; }
.rail > li { scroll-snap-align: start; }
.rail:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.rail__photo { height: clamp(18rem, 26vw, 24rem); margin: 0; border-radius: var(--radius-card); }
@media (min-width: 60rem) { .rail { grid-auto-columns: minmax(15rem, 28%); } }

.detail { padding-block: var(--section-gap); }
.detail__in { display: grid; gap: var(--space-2xl); }
.detail h2 { margin-bottom: var(--space-lg); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap-columns); margin: 0; }
.facts > div { padding-block: var(--space-md); border-top: 1px solid var(--color-rule-2); }
.facts dt { font-size: var(--text-sm); color: var(--color-muted); }
.facts dd { margin: 0; font-size: var(--text-lg); font-weight: 500; }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.tags li { padding: var(--space-xs) var(--space-md); border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 500; }
@media (min-width: 60rem) { .detail__in { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-3xl); } }
.rooms--others { padding-block: var(--section-gap-s) var(--section-gap); }
.rooms--others h2 { margin-bottom: var(--space-2xl); }

/* The reserve flow. */
.flow { padding-block: var(--space-xl) var(--section-gap-s); }
.flow__h { font-size: var(--text-display-s); max-width: 18ch; }
.progress { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: 0 0 var(--space-xl); padding: 0; list-style: none; counter-reset: p; font-size: var(--text-sm); color: var(--color-muted); }
.progress li { counter-increment: p; display: flex; gap: var(--space-xs); padding-bottom: var(--space-2xs); border-bottom: 2px solid transparent; }
.progress li::before { content: counter(p); }
.progress [aria-current] { color: var(--color-ink); font-weight: 600; border-bottom-color: var(--color-ink); }
.alert { max-width: 40rem; margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-error); border-radius: var(--radius-card); background: var(--color-cotton); color: var(--color-error); font-weight: 500; }
.query { margin-top: var(--space-md); font-size: var(--text-lead); color: var(--color-ink-2); }
.query a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); }
.avail { display: grid; gap: var(--space-lg); margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.avail__row { display: grid; gap: var(--space-md); padding: var(--space-md); }
.avail__photo { aspect-ratio: 16 / 10; margin: 0; border-radius: 4px; }
.avail__text { display: grid; gap: var(--space-2xs); align-content: center; }
.avail__name { font-size: var(--text-title); }
.avail__left { justify-self: start; margin-top: var(--space-xs); padding: var(--space-3xs) var(--space-sm); border: 1px solid var(--color-ink); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 500; }
.avail__act { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.avail__total { display: grid; color: var(--color-muted); font-size: var(--text-sm); }
.avail__total b { color: var(--color-print); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
@media (min-width: 48rem) {
  .avail__row { grid-template-columns: 15rem minmax(0, 1fr) auto; gap: var(--space-lg); align-items: center; }
  .avail__act { display: grid; justify-items: end; text-align: right; }
}
.empty { display: grid; gap: var(--space-lg); max-width: 40rem; margin-top: var(--space-xl); padding: var(--space-xl); }
.again { margin-top: var(--space-3xl); max-width: 32rem; }
.again__h { margin-bottom: var(--space-lg); font-size: var(--text-title); }
.pick { display: grid; gap: var(--space-xl); margin-top: var(--space-xl); }
.pick .slip { max-width: 32rem; }
.pick__aside { color: var(--color-ink-2); }
.pick__aside a { color: var(--color-ink); }
@media (min-width: 60rem) { .pick { grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); align-items: end; gap: var(--space-2xl); } }

.ask { display: grid; gap: var(--space-xl); margin-top: var(--space-xl); }
.sheet { position: relative; display: grid; gap: var(--space-md); padding: var(--space-lg); align-content: start; }
.sheet__photo { aspect-ratio: 16 / 10; margin: 0; border-radius: 4px; }
.sheet__name { font-size: var(--text-title); }
.sheet__rows { margin: 0; }
.sheet__rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); }
.sheet__rows dt { color: var(--color-muted); }
.sheet__rows dd { margin: 0; font-weight: 500; text-align: right; }
.sheet__total { font-size: var(--text-2xl); font-weight: 600 !important; letter-spacing: -0.03em; }
.sheet__change a { display: inline-flex; align-items: center; min-height: 44px; }
.contact { display: grid; gap: var(--space-lg); align-content: start; max-width: 36rem; }
.field label { display: block; margin-bottom: var(--space-2xs); font-size: var(--text-sm); font-weight: 500; }
.field input, .field textarea { width: 100%; min-height: 52px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-cotton); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: -3px; }
.field textarea { padding-block: var(--space-sm); resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--color-ink-2); }
.field input:focus-visible, .field textarea:focus-visible { outline-color: var(--color-focus); }
.field input:disabled, .field textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.assure { font-weight: 500; }
.contact .btn { justify-self: start; min-height: 52px; font-size: var(--text-lg); }
@media (min-width: 60rem) { .ask { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; } }

.done { display: grid; gap: var(--space-2xl); }
.done__text { display: grid; gap: var(--space-lg); align-content: start; }
.done__sheet { max-width: 30rem; padding: var(--space-xl); }
.pressed { justify-self: end; margin-bottom: calc(-1 * var(--space-sm)); padding: 0 var(--space-xs); border: 2px solid var(--color-paid); border-radius: 4px; color: var(--color-paid); font: 600 var(--text-xl)/1.3 var(--font-display); letter-spacing: -0.01em; transform: rotate(-7deg); text-shadow: 0.5px 0.75px 0 oklch(var(--lit) / 0.7), -0.5px -0.5px 0 oklch(var(--shade) / 0.2); opacity: 0.92; }
@media (min-width: 60rem) { .done { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); } }

.letter { max-width: 48rem; padding: var(--space-xl) var(--space-lg); }
.letter h2 { margin: var(--space-xl) 0 var(--space-sm); font-size: var(--text-title); }
.letter > p, .letter dd { line-height: 1.7; }
.letter > p:first-of-type { margin-top: var(--space-lg); }
.letter dl { display: grid; gap: var(--space-2xs) var(--space-lg); margin: var(--space-lg) 0 0; }
.letter dt { font-weight: 600; }
.letter dd { margin: 0 0 var(--space-sm); }
@media (min-width: 40rem) { .letter { padding: var(--space-2xl); } .letter dl { grid-template-columns: max-content minmax(0, 1fr); } .letter dd { margin: 0; } }
.flow__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }

@media (prefers-reduced-motion: reduce) { .btn, .pill, .dock, .seg label { transition: none; } }
.flow__h + .lead { margin-top: var(--space-md); }
a[href^="tel:"] { white-space: nowrap; }

/* Received page: how to pay. Each way is a cotton card; the values to copy select whole. */
.pay { display: grid; gap: var(--space-lg); margin-top: var(--space-md); }
.pay .again__h { margin-bottom: 0; }
.pay__way { max-width: 32rem; }
.pay__way dd { overflow-wrap: anywhere; }
.copy { user-select: all; -webkit-user-select: all; font: 400 var(--text-md)/1.4 var(--font-outlier); }
.sheet__note { color: var(--color-muted); font-size: var(--text-sm); }