/* capture.css: the site footer, the "Leave your details" capture, the family row and the free guides strip.
   Loaded on every page that has the footer. The footer is revealed underneath the page by
   fx-kit (.fx-reveal-body / .fx-reveal-foot); the capture is fx-kit's capture form, glued
   together by capture.js. Underlines, not boxes, like the booking and contact pages. */

/* ---- the capture form: footer, page ends and article ends ----
   Colours come from four tokens so each host can tint it: --cap-ink, --cap-muted, --cap-line, --cap-accent. */
.capture{--cap-ink:var(--ink);--cap-muted:var(--muted);--cap-line:color-mix(in srgb,var(--ink) 55%,transparent);--cap-accent:var(--fx-accent,var(--burgundy));--cap-error:#973b39;color:var(--cap-ink)}
@media (prefers-color-scheme:dark){.capture{--cap-error:#f4afa4}}
.capture fieldset{border:0;padding:0;margin:0;min-width:0}
.capture legend{display:block;padding:0;font-size:13px;color:var(--cap-muted)}
.cap-title{font:500 clamp(24px,2.6vw,30px)/1.12 var(--display);letter-spacing:-.025em}
.cap-sub{margin-top:10px;max-width:46ch;font-size:16px;line-height:1.5;color:var(--cap-muted)}
.cap-title+.cap-fields,.cap-sub+.cap-fields{margin-top:22px}
.cap-choices{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:4px}
.cap-choice{position:relative;cursor:pointer}
.cap-choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0;top:50%;left:0}
.cap-choice span{display:block;padding:10px 0;min-height:44px;border-bottom:1px solid var(--cap-line);color:var(--cap-muted);font-size:15px;line-height:1.5;transition:border-color .18s,color .18s,box-shadow .18s}
.cap-choice:hover span{border-color:var(--cap-accent);color:var(--cap-ink)}
.cap-choice input:checked+span{border-color:var(--cap-accent);box-shadow:0 1px 0 var(--cap-accent);color:var(--cap-ink)}
.cap-choice input:focus-visible{outline:0}
.cap-choice input:focus-visible+span{border-color:var(--cap-accent);box-shadow:0 3px 0 var(--cap-accent);color:var(--cap-ink)}
.cap-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 24px;margin-top:20px}
.cap-field{display:block;flex:1 1 200px;min-width:0}
.cap-field.cap-wide{flex-basis:100%}
.cap-field>span{display:block;font-size:13px;color:var(--cap-muted)}
.cap-field i{font-style:normal;opacity:.8}
.cap-field input,.cap-field textarea{display:block;width:100%;height:46px;padding:10px 0;font:inherit;font-size:16px;line-height:1.5;color:var(--cap-ink);background:none;border:0;border-bottom:1px solid var(--cap-line);border-radius:0;outline:0;box-shadow:none;-webkit-appearance:none;appearance:none}
.cap-field textarea{height:auto;min-height:76px;resize:vertical}
.cap-field input::placeholder,.cap-field textarea::placeholder{color:var(--cap-muted);opacity:.75}
.cap-field input:focus,.cap-field textarea:focus{border-bottom-color:var(--cap-accent);box-shadow:0 1px 0 var(--cap-accent)}
.cap-field input:focus-visible,.cap-field textarea:focus-visible{outline:0;box-shadow:0 2px 0 var(--cap-accent)}
.cap-send{display:inline-flex;align-items:center;gap:12px;flex:none;height:46px;padding:0 2px;font:inherit;font-size:15px;font-weight:500;color:var(--cap-ink);background:none;border:0;border-bottom:1px solid var(--cap-ink);border-radius:0;cursor:pointer;transition:box-shadow .2s,opacity .2s}
.cap-send svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4}
.cap-send:hover{box-shadow:0 1px 0 var(--cap-ink)}
.cap-send:focus-visible{outline:2px solid var(--cap-accent);outline-offset:4px}
.capture.is-sending .cap-send{opacity:.6;cursor:progress}
.cap-note{margin-top:14px;font-size:13px;line-height:1.5;color:var(--cap-muted)}
.cap-note a{color:var(--cap-ink);text-underline-offset:3px}
.cap-ok{padding:4px 0}
.capture .cap-ok:focus,.capture .cap-ok:focus-visible{outline:0}
.cap-ok-title{font:500 clamp(24px,2.6vw,30px)/1.12 var(--display);letter-spacing:-.025em}
.cap-ok-title+p{margin-top:10px;max-width:46ch;font-size:16px;line-height:1.5;color:var(--cap-muted)}
.cap-error{margin-top:14px;font-size:14px;line-height:1.5;color:var(--cap-error)}
.capture .honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- free guides from The Gallery AI (writing index and home): a strip in The Gallery AI's lime, as on its home card ---- */
.guides{margin-top:72px;padding:28px 28px 32px;background:#e5e7bf;color:#171816}
.guides-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px}
.guides-title{font:500 clamp(22px,2.2vw,26px)/1.15 var(--display);letter-spacing:-.02em}
.guides-more{font-size:14px;color:#171816;text-underline-offset:4px}
.guides-list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 24px;margin:24px 0 0;padding:0}
.guides-list a{display:block;height:100%;padding-top:14px;border-top:1px solid rgba(23,24,22,.35);color:#171816;text-decoration:none}
.guides-list b{display:block;font:500 18px/1.2 var(--display);letter-spacing:-.015em}
.guides-list span{display:block;margin-top:8px;font-size:14px;line-height:1.45;color:#3f4126}
.guides-list a:hover b{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.guides :focus-visible{outline:2px solid #171816;outline-offset:3px}
@media (max-width:1000px){.guides-list{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.guides{padding:22px 20px 26px}.guides-list{grid-template-columns:1fr}}

/* ---- the footer: one line to leave your details, then the four names and the small print in one row ---- */
main.fx-reveal-body{background:var(--stone)}
.site-foot{background:#622338;color:#f1eeea;padding:clamp(44px,5vw,64px) 0 26px}
.site-foot.is-quiet{padding-top:26px}
.site-foot a{color:inherit;text-underline-offset:3px}
.site-foot :focus-visible{outline:2px solid #f1eeea;outline-offset:4px}
.site-foot .capture{--cap-ink:#f1eeea;--cap-muted:rgba(241,238,234,.74);--cap-line:rgba(241,238,234,.5);--cap-accent:#f1eeea;--cap-error:#ffd0c6}
.foot-top{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:24px 64px;align-items:end}
.site-foot .foot-big{max-width:none;font:500 clamp(30px,3.4vw,44px)/1.02 var(--display);letter-spacing:-.035em;color:#f1eeea}
.foot-sub{margin-top:10px;font-size:15px;line-height:1.5;color:rgba(241,238,234,.78)}
.foot-capture .cap-row{margin-top:0}
.foot-capture .cap-note{margin-top:10px}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 32px;margin-top:clamp(36px,4vw,52px);padding-top:18px;border-top:1px solid rgba(241,238,234,.25);font-size:13px;color:rgba(241,238,234,.72)}
.site-foot.is-quiet .foot-row{margin-top:0;padding-top:0;border-top:0}
.family ul,.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:0;padding:0}
.family a{display:inline-flex;align-items:center;gap:8px;color:#f1eeea;text-decoration:none}
.family a::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--dot,#f1eeea)}
.foot-links a{text-decoration:none}
.family a:hover,.foot-links a:hover{text-decoration:underline}
.family .f-tt{--dot:#d9b48c}
.family .f-ai{--dot:#e5e7bf}
.family .f-sk{--dot:#c593ff}
.family .f-re{--dot:#fff}

/* The footer's interest dropdown, drawn like the other fields: an underline and a small chevron. */
.cap-pick{position:relative}
.cap-pick select{display:block;width:100%;height:46px;padding:10px 26px 10px 0;font:inherit;font-size:16px;line-height:1.5;color:var(--cap-ink);background:none;border:0;border-bottom:1px solid var(--cap-line);border-radius:0;outline:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.cap-pick select:invalid{color:var(--cap-muted)}
.cap-pick select:focus{border-bottom-color:var(--cap-accent);box-shadow:0 1px 0 var(--cap-accent)}
.cap-pick select:focus-visible{outline:0;box-shadow:0 2px 0 var(--cap-accent)}
.cap-pick option{color:#171816;background:#fff}
.cap-pick::after{content:"";position:absolute;right:4px;bottom:20px;width:7px;height:7px;border-right:1.4px solid var(--cap-muted);border-bottom:1.4px solid var(--cap-muted);transform:rotate(45deg);pointer-events:none}

/* The revealed footer must be shorter than the window, or its top could never be seen.
   Phones and short windows scroll it normally; capture.js adds .is-tall when it still doesn't fit. */
.fx-reveal-foot.is-tall{position:static}
@media (max-width:860px){
  .fx-reveal-foot{position:static}
  .foot-top{grid-template-columns:1fr;gap:22px}
}
@media (max-height:640px){.fx-reveal-foot{position:static}}
@media (max-width:420px){
  .cap-choices{gap:0 18px}
  .cap-send{width:100%;justify-content:space-between}
}