/* Prototype round 3 (2026-09-28): geometric tiles, full wordmark, floating booker. Loads after style.css. */
.band{margin-top:0}

/* tiles: the materials as flat patterns + the tree mark */
.t{display:block;position:relative;overflow:hidden;aspect-ratio:1;background:var(--lime);font-style:normal}
.t.tint{background:var(--tint)} .t.ink{background:var(--ink)} .t.sand{background:var(--sand)}
.t.mark svg{position:absolute;left:30%;top:24%;width:40%;height:52%;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round}
.t.mark svg *{vector-effect:non-scaling-stroke}
.t.ink.mark svg{stroke:var(--lime)}
.t.jaali{background:repeating-linear-gradient(45deg,var(--stone) 0 1px,transparent 1px 16px),repeating-linear-gradient(-45deg,var(--stone) 0 1px,transparent 1px 16px),var(--lime)}
.t.arch::after{content:"";position:absolute;left:24%;right:24%;top:20%;bottom:0;background:var(--clay);border-radius:999px 999px 0 0}
.t.tile{background:radial-gradient(circle at 50% 100%,transparent 9.5px,var(--sand) 10px 11px,transparent 11.5px) 0 0/22px 11px,var(--tint)}
.t.thatch{background:repeating-linear-gradient(118deg,var(--sand) 0 1px,transparent 1px 7px),var(--lime)}
.t.brick{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18'%3E%3Cpath d='M0 .5H36M0 9.5H36M.5 0V9M18.5 9V18' stroke='%23B59D88' fill='none'/%3E%3C/svg%3E"),var(--tint)}
.t.stone{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 20L22 16L30 0M22 16L28 36L0 40M28 36L50 30L64 34M50 30L46 0M28 36L24 64M50 30L56 64M0 60L24 64' stroke='%23B59D88' fill='none'/%3E%3C/svg%3E"),var(--lime)}
.t.leaf{background:var(--leaftint)} .t.leaf::after{content:"";position:absolute;left:0;bottom:0;width:72%;height:72%;background:var(--leaf);border-radius:0 100% 0 0;opacity:.85}
.t.steps{background:var(--tint)} .t.steps::after{content:"";position:absolute;inset:0;background:var(--sand);clip-path:polygon(0 100%,0 75%,25% 75%,25% 50%,50% 50%,50% 25%,75% 25%,75% 0,100% 0,100% 100%)}
.t.marble{background:linear-gradient(128deg,transparent 44%,var(--stone) 45%,transparent 46%),linear-gradient(160deg,transparent 64%,var(--stone) 64.6%,transparent 65.4%),#F3EEE6}

/* hero: words + mosaic fill the space above the headline */
.geo{display:grid;grid-template-columns:3fr 9fr;border-top:1px solid var(--stone);margin-top:clamp(16px,2vw,28px)}
.gwords{display:flex;flex-direction:column;justify-content:flex-end;border-right:1px solid var(--stone)}
.gwords p{display:flex;justify-content:space-between;align-items:baseline;padding:14px var(--p);border-top:1px solid var(--stone)}
.gwords p:first-child{border-top:0}
.gwords em{font-family:var(--serif);font-style:italic;font-size:clamp(26px,2.4vw,40px);line-height:1}
.gwords span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--smoke)}
.gtiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--stone)}
.gtiles .t{aspect-ratio:auto;min-height:clamp(110px,11vw,190px)}

/* story: tiles beside the headline, a mosaic in the empty corner */
.story .shead{display:grid;grid-template-columns:1fr auto;align-items:end;gap:var(--g)}
.story .shead>.num-lab{grid-column:1/-1}
.stiles{display:grid;grid-template-columns:repeat(4,clamp(64px,8vw,128px));gap:1px;background:var(--stone);border:1px solid var(--stone);border-radius:var(--r);overflow:hidden}
.smosaic{grid-column:1/4;grid-row:2;align-self:start;margin-top:clamp(48px,6vw,96px);display:grid;grid-template-columns:1fr 1fr;gap:var(--g)}
.smosaic .t{border-radius:calc(var(--r)*.6)}
.smosaic .big{grid-column:1/-1;aspect-ratio:2/1.4}
.smosaic .big svg{left:38%;width:24%}
.squote{grid-column:1/-1;font-size:15px;color:var(--smoke);border-top:1px solid var(--stone);padding-top:14px}
.squote em{font-family:var(--serif);color:var(--ink)}
.materials li i.t{width:40px;height:40px;border:0;border-radius:8px;aspect-ratio:1}

/* floating booker, on every section until the visit form */
.sticky{display:none!important}
.booker{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:60;transition:transform .6s var(--ease),opacity .4s}
.booker.hide{transform:translate(-50%,160%);opacity:0;pointer-events:none}
.bk-open{display:none}
.bk-body{display:flex;align-items:center;gap:clamp(12px,1.6vw,24px);background:var(--ink);color:var(--lime);border-radius:99px;padding:8px 8px 8px 24px;box-shadow:0 12px 40px rgba(79,67,58,.25)}
.bk-lab,.bk-open{display:flex;align-items:center;gap:10px;font-weight:500;white-space:nowrap}
.booker svg{width:14px;height:17px;fill:none;stroke:currentColor;stroke-width:44;stroke-linecap:round}
.bk-body label{display:flex;flex-direction:column;border-left:1px solid rgba(248,244,237,.2);padding-left:clamp(12px,1.6vw,24px)}
.bk-body label span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.bk-body input,.bk-body select{background:none;border:0;color:inherit;font:inherit;font-size:15px;color-scheme:dark;padding:2px 0;outline:none}
.bk-body select option{color:var(--ink)}
.bk-go{background:var(--lime);color:var(--ink);border:0;border-radius:99px;padding:14px 22px;font:inherit;font-weight:500;white-space:nowrap;cursor:pointer}
.bk-x{display:none;background:none;border:0;color:inherit;font-size:24px;line-height:1;padding:0 8px;cursor:pointer}

@media (max-width:900px){
  .geo{grid-template-columns:1fr;margin-top:24px}
  .gwords{flex-direction:row;border-right:0}
  .gwords p{flex:1;flex-direction:column;gap:4px;border-top:0;border-left:1px solid var(--stone);padding:12px}
  .gwords p:first-child{border-left:0}
  .gtiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .gtiles .t{min-height:0;aspect-ratio:1}
  .gtiles .t:nth-child(n+9){display:none}
  .band{margin-top:0}
  .story .shead{grid-template-columns:1fr}
  .stiles{grid-template-columns:repeat(4,1fr)}
  .smosaic{grid-column:1/-1;grid-row:auto;margin-top:24px;grid-template-columns:repeat(4,1fr)}
  .smosaic .big{grid-column:1/-1;aspect-ratio:3/1.4}
  .smosaic .big svg{left:44%;width:12%}
  .booker{left:16px;right:16px;bottom:16px;transform:none}
  .booker.hide{transform:translateY(160%)}
  .bk-open{display:flex;width:100%;justify-content:center;background:var(--ink);color:var(--lime);border:0;border-radius:99px;padding:16px;font:inherit;font-weight:500}
  .bk-body{display:none;flex-direction:column;align-items:stretch;border-radius:var(--r);padding:20px;gap:14px}
  .booker.open .bk-open{display:none} .booker.open .bk-body{display:flex}
  .bk-body label{border-left:0;padding-left:0;border-bottom:1px solid rgba(248,244,237,.2);padding-bottom:8px}
  .bk-x{display:block;position:absolute;top:12px;right:12px}
}

@media (max-width:900px){.hnav .logo{font-size:15px;gap:8px}}

/* lightbox: the whole photo, zooming in from the card */
.lb{padding:0}
.lb img{max-width:92vw;max-height:88vh;transform:scale(.9);transition:transform .6s var(--ease)}
.lb.open img{transform:none}
.lb::after{content:"×";position:absolute;top:16px;right:24px;color:var(--lime);font-size:32px;line-height:1}

/* FAQ: heading on the left, 12 questions on the right */
.faq{display:grid;grid-template-columns:4fr 7fr;gap:clamp(32px,5vw,96px);align-items:start}
.fhead{position:sticky;top:clamp(40px,6vw,96px)}
.fhead h2{margin-bottom:20px}
.fhead .mut{max-width:32ch;margin-bottom:24px}
.faq .flist{max-width:none;margin:0}
@media (max-width:900px){.faq{grid-template-columns:1fr}.fhead{position:static}}


/* film + grain: a quiet editorial finish over the whole page */
body::after{content:"";position:fixed;inset:-50%;z-index:100;pointer-events:none;opacity:.11;mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .31 0 0 0 0 .26 0 0 0 0 .23 0 0 0 1.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}
/* photos: soft film tone, lifted blacks, a faint vignette */
.ph img,.spimg img,.card img,.mast-bg,.lb img{filter:contrast(.96) saturate(.86) sepia(.08) brightness(1.02)}
.ph::before,.card.ph::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(79,67,58,.22) 100%)}
.hphoto img{object-position:50% 58%}
/* card crop: the amphitheatre dusk photo */
.card img[src*="amphitheatre_dusk-tables-stage"]{object-position:50% 60%}

/* cursor: bigger at rest (owner, 2026-09-28) */
.cur{width:26px;height:26px;margin:-13px 0 0 -13px;background:rgba(79,67,58,.85)}
.cur.hover{width:60px;height:60px;margin:-30px 0 0 -30px}
.cur.big{width:104px;height:104px;margin:-52px 0 0 -52px}

/* couples abroad: tall frame for the garland photo */
.home{grid-template-columns:5fr 6fr;align-items:center}
.hphoto{aspect-ratio:4/5}
.hphoto img{object-position:50% 50%}

/* 10 the grounds: a fine-line venue map */
.grounds{padding-top:clamp(120px,14vw,220px);display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,96px);align-items:center}
.gtext h2{margin-bottom:20px}
.gtext .mut{max-width:40ch;margin-bottom:28px}
.glegend{border-top:1px solid var(--stone)}
.glegend li{display:grid;grid-template-columns:40px 1fr;column-gap:12px;padding:12px 0;border-bottom:1px solid var(--stone);cursor:default;transition:padding .4s var(--ease)}
.glegend i{grid-row:1/3;font-style:normal;width:30px;height:30px;border-radius:50%;border:1px solid var(--stone);display:grid;place-items:center;font-size:12px;color:var(--smoke);align-self:center}
.glegend small{color:var(--smoke);font-size:13px}
.glegend li.on{padding-left:8px}.glegend li.on i{background:var(--clay);border-color:var(--clay);color:var(--lime)}
.gcard{background:var(--tint);padding:clamp(16px,2vw,32px);margin:0}
.gcard figcaption{margin-top:10px;color:var(--smoke);font-size:11px}
.gmap{width:100%;height:auto;display:block}
.gmap *{vector-effect:non-scaling-stroke}
.gmap .bd{fill:var(--lime);stroke:var(--ink);stroke-width:1.2}
.gmap .bd2,.gmap .walk{fill:none;stroke:var(--sand);stroke-width:1;stroke-dasharray:4 4}
.gmap .lawn{fill:var(--leaftint);stroke:var(--leaf);stroke-width:1}
.gmap .bl rect,.gmap .round{fill:none;stroke:var(--smoke);stroke-width:1}
.gmap .thatch{fill:none;stroke:var(--sand);stroke-width:1;stroke-dasharray:2 3}
.gmap .st{fill:none;stroke:var(--ink);stroke-width:2}
.gmap .pond{fill:var(--stone);stroke:var(--smoke)}
.gmap .aria{fill:none;stroke:var(--ink);stroke-width:1.2}
.gmap .gate{fill:var(--sand)}
.gmap .cars rect{fill:none;stroke:var(--stone)}
.gmap .tr{fill:var(--leaf);opacity:.55}
.gmap .pin circle{fill:var(--ink);transition:fill .3s}
.gmap .pin text{fill:var(--lime);font:500 18px var(--sans);text-anchor:middle}
.gmap .pin.on circle{fill:var(--clay)}
.gmap .lb{fill:var(--smoke);font:12px var(--sans);text-anchor:middle;letter-spacing:.06em}
@media (max-width:900px){.grounds,.home{grid-template-columns:1fr}}

/* the phone-only booker button stays hidden on desktop */
@media (min-width:901px){.bk-open{display:none!important}}

/* visit section: Book a visit | Reserve your date */
.vright{display:grid;gap:14px;align-content:start}
.vtabs{display:flex;gap:6px;background:var(--tint);border-radius:99px;padding:5px;width:max-content;max-width:100%}
.vtabs button{border:0;background:none;font:inherit;font-size:15px;padding:10px 18px;border-radius:99px;cursor:pointer;color:var(--smoke);display:flex;gap:8px;align-items:center}
.vtabs button i{font-style:normal;font-size:11px;opacity:.7}
.vtabs button.on{background:var(--ink);color:var(--lime)}
.vres{margin-top:32px;padding-top:20px;border-top:1px solid var(--stone);display:grid;gap:8px;max-width:44ch}
.vres p:not(.lab){color:var(--smoke);font-size:15px}
.visit.reserving .vres{opacity:.45}
#reserveForm .r-note{color:rgba(248,244,237,.75);font-size:14px}
#reserveForm .r-span{font-size:13px;color:#F1DDB0;margin-top:-6px}
.r-fn{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.r-fn legend{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:8px;padding:0}
.r-fn label{cursor:pointer}
.r-fn input{position:absolute;opacity:0;pointer-events:none}
.r-fn span{display:inline-block;padding:8px 14px;border:1px solid rgba(248,244,237,.3);border-radius:99px;font-size:14px}
.r-fn input:checked+span{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.r-fn input:focus-visible+span{outline:2px solid #F1DDB0;outline-offset:2px}
.r-ok{display:flex!important;flex-direction:row!important;gap:10px;align-items:flex-start;font-size:14px}
.r-ok input{margin-top:3px;accent-color:#F1DDB0;width:auto}
.r-done{display:grid;gap:14px;align-content:start}
.r-done[hidden],#reserveForm[hidden],#visitForm[hidden]{display:none!important}
.r-done h3{font-size:clamp(24px,2.4vw,34px);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.r-done h3 em{font-family:var(--serif);color:#F1DDB0}
.r-done .r-when{color:#F1DDB0;font-weight:500}
.r-done p{color:rgba(248,244,237,.8)}
.r-done .r-wa{color:var(--lime);font-weight:500}
.r-done .r-again{justify-self:start;background:none;border:1px solid rgba(248,244,237,.35);color:var(--lime);border-radius:99px;padding:8px 16px;font:inherit;font-size:14px;cursor:pointer}
.r-fn span,.r-ok span{text-transform:none!important;letter-spacing:0!important;opacity:1!important;font-size:14px!important}
.r-ok input{appearance:auto!important;-webkit-appearance:checkbox!important;border:0!important;padding:0!important;width:16px;height:16px;flex:none}