/* Casa Padel — one page. The entrance, edge to edge; one line in the sky; one field and one button on the street. The button opens the membership inquiry (end of this file). */
:root {
  --burgundy: #661920; --sky: #cce0f3; --beige: #fffbeb; --wash: rgba(102, 25, 32, .07);
  --font-display: "Giverny Variable", "Instrument Serif", "Casa Display Fallback", Georgia, serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.7, 0, .2, 1);
  --gutter: clamp(20px, 4.4vw, 64px);
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .1 0 0 0 0 .13 .2 0 0 0 -.055'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --wash-mask-l: url("img/wash-l.png"); /* the torn paper edges, pre-rendered: a filter mask drawn live made the painting arrive late behind the opening curtain */
  --wash-mask-p: url("img/wash-p.png");
}
@font-face { font-family: "Casa Display Fallback"; src: local("Georgia"); size-adjust: 81%; ascent-override: 98%; descent-override: 28%; line-gap-override: 0%; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%; }
body { margin: 0; min-height: 100%; background: var(--grain-dark), linear-gradient(var(--wash), var(--wash)), var(--beige); color: var(--burgundy); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
h1, p { margin: 0; }
img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
html { color-scheme: only light; } /* the paper stays paper under a phone's forced dark mode */
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--burgundy); color: var(--beige); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .03em; line-height: .96; -webkit-text-stroke: .013em currentColor; }
.label { font-family: var(--font-body); font-size: .75rem; font-weight: 500; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .02em 0; margin: -.08em -.02em 0; }
.w > span { display: inline-block; }

/* The page is the painting */
.page { position: relative; min-height: 100vh; min-height: 100svh; overflow: clip; }
.pic { position: absolute; inset: 0; z-index: 1; }
.art {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: var(--wash-mask-l), linear-gradient(to top, #0000 0, #000 15vh); -webkit-mask-size: 100% 100%, 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-composite: source-in;
  mask-image: var(--wash-mask-l), linear-gradient(to top, #0000 0, #000 15vh); mask-size: 100% 100%, 100% 100%; mask-repeat: no-repeat; mask-composite: intersect;
}
@supports not ((mask-composite: intersect) or (-webkit-mask-composite: source-in)) { .art { -webkit-mask-image: var(--wash-mask-l); mask-image: var(--wash-mask-l); } }
}
.grain { position: absolute; inset: 0; z-index: 2; background: var(--grain-dark); pointer-events: none; }
/* the opening: the house draws itself on burgundy with a hairline through it (desktop); then the house and line fade and the burgundy lifts straight off the screen */
.intro { --lk: min(62vw, 360px); position: fixed; inset: 0; z-index: 50; display: none; place-items: center; overflow: hidden; background: var(--burgundy); color: var(--beige); pointer-events: none; transition: transform .95s var(--ease-in-out); }
.js .intro { display: grid; will-change: transform; }
.is-ready .intro { transform: translateY(-100%); }
.intro.is-done { display: none !important; }
.intro__lockup { position: relative; width: var(--lk); }
.intro__logo-wrap { width: 100%; }
.intro__logo { display: block; width: 100%; height: auto; fill: currentColor; opacity: 0; clip-path: inset(0 100% 0 0); filter: blur(5px); animation: intro-draw 1.5s var(--ease-out) .3s forwards; }
/* the hairline sits on the house's centre line and grows from the house out to both edges of the screen */
.intro__rule { position: absolute; top: 50%; width: calc(50% - var(--lk) / 2 - 30px); height: 1px; background: currentColor; opacity: .7; transform: scaleX(0); animation: intro-rule 1.1s var(--ease-out) 1.25s forwards; }
.intro__rule--l { left: 0; transform-origin: right center; }
.intro__rule--r { right: 0; transform-origin: left center; }
@keyframes intro-draw { 0% { opacity: 0; clip-path: inset(0 100% 0 0); filter: blur(5px); } 30% { opacity: 1; } 100% { opacity: 1; clip-path: inset(0 0 0 0); filter: blur(0); } }
@keyframes intro-rule { to { transform: scaleX(1); } }
/* Motion: the opening is the only animation; the page beneath it is complete from the first paint. Nothing loops. */

/* the mark, top left, centred in the paper margin between the edge and the painting; nothing else up there */
.mark { position: absolute; z-index: 5; top: 26px; left: 26px; display: block; height: 28px; width: auto; fill: currentColor; filter: drop-shadow(0 0 1px var(--beige)) drop-shadow(0 0 9px rgba(255, 251, 235, .95)); }

/* the one line, in the sky */
.sky { position: absolute; z-index: 3; left: 0; right: 0; top: 11vh; display: grid; justify-items: center; text-align: center; padding: 0 var(--gutter); }
.h1 { font-size: clamp(2.2rem, 3.3vw, 3.9rem); letter-spacing: .06em; }

/* the street: the button, the line, then the Instagram glyph; the line sits halfway between the other two */
.street { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: 0; display: grid; justify-items: center; text-align: center; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.form { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 640px; }
.btn { --n: 7px; flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 2.3em; border: 0; cursor: pointer; white-space: nowrap; text-decoration: none; background: var(--burgundy); color: var(--beige); font-family: var(--font-body); font-size: .8125rem; font-weight: 500; line-height: 1; letter-spacing: .15em; text-transform: uppercase; text-align: center; touch-action: manipulation; transition: background-color .35s var(--ease-out), color .35s var(--ease-out), transform .2s var(--ease-out);
  -webkit-mask: radial-gradient(circle var(--n) at 0 0, #0000 98%, #000) top left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 0, #0000 98%, #000) top right / 51% 51% no-repeat, radial-gradient(circle var(--n) at 0 100%, #0000 98%, #000) bottom left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 100%, #0000 98%, #000) bottom right / 51% 51% no-repeat;
  mask: radial-gradient(circle var(--n) at 0 0, #0000 98%, #000) top left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 0, #0000 98%, #000) top right / 51% 51% no-repeat, radial-gradient(circle var(--n) at 0 100%, #0000 98%, #000) bottom left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 100%, #0000 98%, #000) bottom right / 51% 51% no-repeat; }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--burgundy), inset 0 0 0 4px var(--beige); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: progress; }
@media (hover: hover) { .btn:hover { background: var(--sky); color: var(--burgundy); } }
/* the line: small, spaced, a hairline either side */
.line { display: flex; align-items: center; gap: 22px; margin: 32px 0 20px; font-size: .6875rem; font-weight: 700; letter-spacing: .28em; opacity: .92; }
.line::before, .line::after { content: ""; width: clamp(28px, 6vw, 72px); height: 1px; background: currentColor; opacity: .6; }
.corners { display: flex; justify-content: center; width: 100%; margin-top: 0; font-size: .6875rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.corners a { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.ig svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.corners span { display: inline-flex; align-items: center; min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
  .js .intro { display: none; }
}

/* Viewports */
@media (min-width: 761px) and (max-height: 619px) { .sky { top: 7vh; } .h1 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); } .line { margin: 24px 0 12px; } .corners { margin-top: 0; } }
@media (min-width: 761px) and (min-aspect-ratio: 19/10) { .art { object-position: 50% 40%; } .sky { top: 6vh; } }
@media (max-width: 760px) and (orientation: portrait) {
  .mark { top: 18px; left: 20px; height: 26px; }
  .intro__rule { display: none; } /* on a phone the house stands alone, draws faster and the curtain goes sooner */
  .intro__logo { animation-duration: 1.1s; animation-delay: .2s; }
  /* on a phone the page is a column: the painting fills everything above the controls and dissolves into the paper
     right where the button begins; the button, the line and the glyph sit on paper, never on the picture */
  .page { display: flex; flex-direction: column; }
  .pic { position: relative; flex: 1 1 auto; height: auto; min-height: 50svh; }
  /* the crop is anchored to the top: on a real phone the box is shorter than the image, so the trimming happens in the faded bottom, never in the sky under the headline */
  .art { object-position: 50% 0; -webkit-mask-image: var(--wash-mask-p), linear-gradient(to top, #0000 0, #000 15vh); -webkit-mask-size: 100% 100%, 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-composite: source-in; mask-image: var(--wash-mask-p), linear-gradient(to top, #0000 0, #000 15vh); mask-size: 100% 100%, 100% 100%; mask-repeat: no-repeat; mask-composite: intersect; }
  .art { -webkit-mask-image: var(--wash-mask-p), linear-gradient(to top, #0000 0, #000 15svh); mask-image: var(--wash-mask-p), linear-gradient(to top, #0000 0, #000 15svh); }
  .sky { top: max(72px, 8.5svh); padding: 0 20px; }
  .h1 { font-size: 7.4vw; }
  .street { position: relative; left: auto; right: auto; bottom: auto; width: 100%; grid-template-columns: minmax(0, 1fr); padding: 6px 20px calc(12px + env(safe-area-inset-bottom)); }
  .form { gap: 12px; max-width: none; min-width: 0; }
  .btn { width: 100%; min-width: 0; max-width: 100%; font-size: clamp(.6875rem, 3.4vw, .8125rem); } /* shrinks a little instead of pushing the stack off centre on narrow phones or large system text */
  .line { max-width: 100%; }
  .line { width: 100%; margin: 22px 0 10px; font-size: .625rem; letter-spacing: .2em; line-height: 1.6; gap: 14px; text-wrap: balance; }
  .line > span { flex: 0 1 auto; max-width: 64%; }
  .line::before, .line::after { width: auto; flex: 1 1 24px; min-width: 24px; } /* the hairlines run from the sentence to the edges of the stack */
  .corners { margin-top: 0; font-size: .625rem; }
}
/* stagger indexes (kept out of the markup so the page runs under a strict Content Security Policy) */
.h1 .w > span { --i: 0; }
.h1 .w + .w > span { --i: 1; }
.street > .form { --i: 0; }
.street > .line { --i: 1; }
.street > .corners { --i: 2; }


/* ---- Membership inquiry ----
   Without JavaScript: a plain section under the hero, shown at #inquiry, whose form posts to /api/inquire.
   With JavaScript (site.js adds .is-modal, then .is-open): a dialog over the hero; on phones a full-height sheet with its own scroll. */
.inquiry { display: none; position: relative; z-index: 6; padding: 48px var(--gutter) 72px; scroll-margin-top: 24px; }
.inquiry:target { display: grid; justify-items: center; }
.inquiry__panel { --n: 7px; position: relative; width: min(560px, 100%); color: var(--burgundy); background: var(--grain-dark), var(--beige); box-shadow: inset 0 0 0 1px var(--burgundy);
  -webkit-mask: radial-gradient(circle var(--n) at 0 0, #0000 98%, #000) top left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 0, #0000 98%, #000) top right / 51% 51% no-repeat, radial-gradient(circle var(--n) at 0 100%, #0000 98%, #000) bottom left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 100%, #0000 98%, #000) bottom right / 51% 51% no-repeat;
  mask: radial-gradient(circle var(--n) at 0 0, #0000 98%, #000) top left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 0, #0000 98%, #000) top right / 51% 51% no-repeat, radial-gradient(circle var(--n) at 0 100%, #0000 98%, #000) bottom left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 100%, #0000 98%, #000) bottom right / 51% 51% no-repeat; }
.inquiry__body { padding: 56px clamp(20px, 6vw, 48px) 40px; }
.inquiry__close { position: absolute; top: 10px; right: 10px; z-index: 1; display: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; cursor: pointer; place-items: center; -webkit-appearance: none; appearance: none; }
.inquiry__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.is-modal .inquiry__close { display: grid; background: var(--grain-dark), var(--beige); } /* its own paper: the body scrolls underneath it */
.inquiry__title { margin: 0 0 30px; font-size: clamp(1.75rem, 2.4vw, 2.125rem); letter-spacing: .06em; }
.inquiry__fields { display: grid; gap: 22px 24px; }
.f { position: relative; min-width: 0; }
.f__label { display: block; margin-bottom: 4px; }
.f__opt { font-weight: 400; letter-spacing: .12em; opacity: .75; }
.f__input { display: block; width: 100%; height: 44px; margin: 0; padding: 0; color: var(--burgundy); caret-color: var(--burgundy); font-size: 1.0625rem; font-weight: 500; letter-spacing: .01em; background: none; border: 0; border-bottom: 1px solid rgba(102, 25, 32, .6); border-radius: 0; -webkit-appearance: none; appearance: none; transition: border-color .25s var(--ease-out); }
.f__input:focus, .f__input:focus-visible { outline: none; border-bottom-color: var(--burgundy); box-shadow: 0 1px 0 var(--burgundy); }
.f__input[aria-invalid="true"] { border-bottom: 2px solid var(--burgundy); }
.f__input:-webkit-autofill { -webkit-text-fill-color: var(--burgundy); transition: background-color 9999s; }
.f__select { padding-right: 28px; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23661920' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 2px center / 18px 18px no-repeat; }
.f__error { margin-top: 6px; font-size: .8125rem; font-weight: 500; line-height: 1.4; }
.cf-turnstile { margin-top: 20px; }
.cf-turnstile:empty { display: none; }
.inquiry__alert { margin: 24px 0 0; padding: 12px 16px; font-size: .875rem; font-weight: 700; line-height: 1.45; box-shadow: inset 0 0 0 1px var(--burgundy); }
.inquiry__submit { width: 100%; margin-top: 28px; }
.inquiry__fine { margin-top: 14px; font-size: .75rem; line-height: 1.5; text-align: center; }
.inquiry__fine a { text-underline-offset: .2em; }
.inquiry__done { padding: 8px 0 4px; font-size: 1.125rem; font-weight: 700; line-height: 1.5; text-wrap: balance; }
.inquiry__done:focus { outline: none; }
@media (min-width: 480px) { .inquiry__fields { grid-template-columns: 1fr 1fr; } .f { grid-column: 1 / -1; } .f--half { grid-column: auto; } }
/* the dialog */
.inquiry.is-modal { display: none; position: fixed; inset: 0; z-index: 20; padding: 24px; place-items: center; background: rgba(102, 25, 32, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overscroll-behavior: contain; }
.inquiry.is-modal.is-open { display: grid; animation: inquiry-fade .3s var(--ease-out) both; }
.is-modal .inquiry__panel { display: flex; flex-direction: column; max-height: calc(100vh - 48px); max-height: calc(100svh - 48px); }
.is-modal.is-open .inquiry__panel { animation: inquiry-rise .5s var(--ease-out) both; }
.is-modal .inquiry__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-padding-top: 64px; }
@keyframes inquiry-fade { from { opacity: 0; } }
@keyframes inquiry-rise { from { opacity: 0; transform: translateY(16px); } }
html.is-locked, html.is-locked body { overflow: hidden; }
@media (max-width: 760px) {
  .inquiry.is-modal { padding: 0; place-items: stretch; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .is-modal .inquiry__panel { width: 100%; height: 100%; max-height: none; box-shadow: none; -webkit-mask: none; mask: none; }
  .is-modal .inquiry__body { padding: calc(64px + env(safe-area-inset-top)) 20px calc(32px + env(safe-area-inset-bottom)); scroll-padding-top: calc(64px + env(safe-area-inset-top)); }
  .is-modal .inquiry__close { top: calc(10px + env(safe-area-inset-top)); }
  .inquiry__title { font-size: 2rem; margin-bottom: 26px; }
  .inquiry__fields { gap: 20px; }
}

/* ---- Secondary pages: /thank-you, /privacy and the endpoint's own error page. The mark top left, as on the home page. ---- */
.note { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; justify-items: center; gap: 22px; padding: 96px var(--gutter) 80px; text-align: center; }
.mark img { height: 100%; width: auto; }
.note__title { font-size: clamp(2.2rem, 3.3vw, 3.9rem); letter-spacing: .06em; }
.note__text { max-width: 34ch; font-size: 1.125rem; font-weight: 700; line-height: 1.5; text-wrap: balance; }
.note__back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .4em; }
.note--doc { align-content: start; justify-items: stretch; text-align: left; gap: 0; }
.doc { width: 100%; max-width: 640px; margin: 0 auto; display: grid; justify-items: start; }
.doc .note__title { margin: 0 0 32px; font-size: clamp(2rem, 3vw, 3rem); }
.doc__h { margin: 30px 0 8px; font-size: .8125rem; }
.doc__p { max-width: 60ch; }
.doc__p + .doc__p, .doc__list + .doc__p, .doc__p + .doc__list { margin-top: 12px; }
.doc__list { max-width: 60ch; margin: 0; padding: 0 0 0 1.1em; display: grid; gap: 6px; }
.doc__p a, .doc__list a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.doc .note__back { margin-top: 44px; }