/* =====================================================================
   KIN COCKTAIL BAR & LOUNGE - DIVI CUSTOM CSS
   Paste into: Divi > Theme Options > General > Custom CSS
   (or Appearance > Customize > Additional CSS)

   How it's organized
   1. Tokens          5. Sections & schemes     9.  Cocktails (blurbs)
   2. Base / resets   6. Text components        10. Events + eclipse
   3. Buttons         7. Hero                   11. Visit + footer
   4. Header/drawer   8. About + featured       12. Book Your Event page
                                                13. Form styling, motion, a11y

   Every section/module is targeted by a CSS class set in
   Module Settings > Advanced > CSS ID & Classes. Don't remove those
   classes when editing - they carry the design.

   Contrast (WCAG 2.2 AA) - verified on the prototype:
   ivory on green 13.4:1 | on green-mid 10.3:1 | on green-deep 15.7:1
   gold-bright on green 6.2:1 | on green-mid 4.7:1 | on walnut >=4.9:1
   sage on green 7.9:1 | ivory on red 4.5:1 | gold-ink on ivory 4.9:1
   Never use: red as text on green (3.0:1) | gold #B0802B as text (4.2:1)
   ===================================================================== */

/* 1. TOKENS ----------------------------------------------------------- */
:root{
  --ivory:#F7F3EC; --ivory-2:#EFE9DF;
  --green:#102C28; --green-deep:#091E1B; --green-mid:#1B403A;
  --gold:#B0802B; --gold-bright:#CE9F4C; --gold-ink:#8A6418;
  --red:#B74E45; --red-soft:#E8907F; --muted:#606E67; --sage:#B4BFB8;
  --walnut:#3E2A1E;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.34' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.42 0 0 0 0 0.25 0 0 0 1.1 -0.38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  --arch:999px 999px 12px 12px;
  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease:cubic-bezier(.2,.7,.1,1);
  --pad:clamp(20px,5vw,72px);
  --slat-w:22px;
}

/* 2. BASE / DIVI RESETS ---------------------------------------------- */
html{scroll-behavior:smooth; scroll-padding-top:96px}
body, #page-container, #et-main-area, #main-content{background:var(--green)!important}
body{color:var(--ivory); font:400 17px/1.7 var(--sans); -webkit-font-smoothing:antialiased}
#main-content .container:before{display:none}
::selection{background:var(--gold-bright); color:var(--green-deep)}

#page-container .kin-sec{
  --bg:var(--green); --fg:var(--ivory); --soft:var(--sage); --accent:var(--gold-bright);
  --line:rgba(247,243,236,.22); --focus:var(--gold-bright);
  position:relative; overflow:hidden; background-color:var(--bg)!important; color:var(--fg);
  padding:clamp(88px,10vw,150px) 0;
}
#page-container .kin-sec .et_pb_row,#page-container .kin-sec .et_pb_column{box-sizing:border-box}
#page-container .kin-sec .et_pb_row{width:min(1280px,100%); max-width:none; margin:0 auto; padding:0 var(--pad)}
#page-container .kin-sec .et_pb_row + .et_pb_row{margin-top:48px}
#page-container .kin-sec .et_pb_column{margin-bottom:0}
#page-container .kin-sec .et_pb_module{margin-bottom:0}
#page-container .kin-sec :where(.et_pb_text,.et_pb_text_inner){color:inherit}
#page-container .kin-sec :where(p){padding-bottom:0; margin:0}
/* :where() keeps this reset at low specificity so the component classes below win */
#page-container .kin-sec :where(h1,h2,h3,h4,h5,h6){
  color:inherit; padding:0; margin:0; font-family:var(--serif); font-weight:400; line-height:1.05; letter-spacing:-.01em}
#page-container .kin-sec em{font-style:italic}
#page-container .kin-sec h1 em,#page-container .kin-sec h2 em,#page-container .kin-sec h3 em{color:var(--accent)}
#page-container .kin-sec a:not(.et_pb_button){color:inherit}
#page-container .kin-sec .et_pb_image_wrap{display:block; width:100%}
#page-container .kin-sec .et_pb_image{margin:0; text-align:left}
#page-container .kin-sec img{max-width:100%}

/* desktop: vertically centered two-up rows */
@media (min-width:981px){
  #page-container .kin-row-center{display:flex!important; align-items:center}
  #page-container .kin-row-center::after{display:none}
  #page-container .kin-row-top{display:flex!important; align-items:flex-start}
  #page-container .kin-row-top::after{display:none}
}

/* focus - visible everywhere, color per scheme */
#page-container :focus-visible,.kin-header :focus-visible,.kin-drawer :focus-visible{outline:2px solid var(--focus,var(--gold-bright))!important; outline-offset:4px; border-radius:6px}

.kin-sr-only{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:-1px}

/* 3. BUTTONS (Divi Button module + class "kin-pill") ------------------ */
body #page-container a.et_pb_button.kin-pill{
  display:inline-flex!important; align-items:center; gap:.8em; min-height:44px;
  padding:.5em .55em .5em 1.2em!important; margin:0;
  border:1px solid var(--fg,var(--ivory))!important; border-radius:999px!important;
  background:transparent!important; color:var(--fg,var(--ivory))!important;
  font:500 12px/1 var(--mono)!important; letter-spacing:.12em!important; text-transform:uppercase;
  line-height:1!important; text-decoration:none; transition:background .25s, color .25s;
}
body #page-container a.et_pb_button.kin-pill:hover{padding:.5em .55em .5em 1.2em!important; background:rgba(247,243,236,.08)!important; border-color:var(--fg,var(--ivory))!important}
/* arrow chip - replaces Divi's hover icon; "/ ''" hides the glyph from screen readers */
body #page-container a.et_pb_button.kin-pill:after,
body #page-container a.et_pb_button.kin-pill:hover:after{
  content:"\2192"; content:"\2192" / "";
  position:static!important; opacity:1!important; margin:0!important; left:auto!important; right:auto!important;
  display:grid; place-items:center; width:2em; height:2em; border-radius:50%;
  background:var(--gold-bright); color:var(--green-deep);
  font:400 14px/1 var(--sans)!important; letter-spacing:0; text-transform:none; transition:none;
}
body #page-container a.et_pb_button.kin-pill:before{display:none!important}
body #page-container a.et_pb_button.kin-arrow-out:after{content:"\2197"; content:"\2197" / ""}
body #page-container a.et_pb_button.kin-arrow-down:after{content:"\2193"; content:"\2193" / ""}
body #page-container a.et_pb_button.kin-pill--solid{background:var(--gold-bright)!important; border-color:var(--gold-bright)!important; color:var(--green-deep)!important}
body #page-container a.et_pb_button.kin-pill--solid:hover{background:#DDB46A!important; border-color:#DDB46A!important}
body #page-container a.et_pb_button.kin-pill--solid:after{background:var(--green-deep); color:var(--gold-bright)}
/* buttons on ivory */
body #page-container .kin-light a.et_pb_button.kin-pill,body #page-container .kin-light-card a.et_pb_button.kin-pill{border-color:var(--green)!important; color:var(--green)!important}
body #page-container .kin-light a.et_pb_button.kin-pill:after,body #page-container .kin-light-card a.et_pb_button.kin-pill:after{background:var(--green); color:var(--ivory)}
body #page-container .kin-light a.et_pb_button.kin-pill--solid,body #page-container .kin-light-card a.et_pb_button.kin-pill--solid{background:var(--green)!important; color:var(--ivory)!important}
body #page-container .kin-light a.et_pb_button.kin-pill--solid:after,body #page-container .kin-light-card a.et_pb_button.kin-pill--solid:after{background:var(--gold-bright); color:var(--green-deep)}
/* buttons side by side: add class "kin-btns" to the column */
#page-container .kin-btns .et_pb_button_module_wrapper{display:inline-block; margin:0 10px 10px 0; vertical-align:middle}
#page-container .kin-btns .et_pb_text:has(+ .et_pb_button_module_wrapper){margin-bottom:36px}
#page-container .kin-btns .et_pb_button_module_wrapper + .et_pb_text{display:inline-block; vertical-align:middle; margin:0 0 10px 10px}

/* 4. HEADER + MOBILE DRAWER (Theme Builder header, Code module) ------- */
.kin-skip{position:fixed; left:16px; top:12px; z-index:100001; background:var(--ivory); color:var(--green)!important; padding:.7em 1.1em; border-radius:999px; font:500 14px var(--mono); text-decoration:none; transform:translateY(-200%); transition:transform .2s}
.kin-skip:focus{transform:none; outline:2px solid var(--gold-bright); outline-offset:3px}
.kin-header{position:fixed; inset:0 0 auto; z-index:99990; transition:background .35s, box-shadow .35s}
.admin-bar .kin-header{top:32px}
@media (max-width:782px){.admin-bar .kin-header{top:46px}}
.kin-header .kin-bar{width:min(1280px,100%); margin:0 auto; padding:0 var(--pad); display:flex; align-items:center; gap:28px; height:96px; transition:height .35s var(--ease)}
.kin-header.is-scrolled{background:rgba(9,30,27,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 1px 0 rgba(206,159,76,.28)}
.kin-header.is-scrolled .kin-bar{height:68px}
.kin-logo{display:flex; align-items:center; margin-right:auto; text-decoration:none}
.kin-logo img{height:52px; width:auto; transition:height .35s var(--ease)}
.kin-header.is-scrolled .kin-logo img{height:38px}
.kin-nav ul{display:flex; gap:28px; list-style:none; margin:0; padding:0}
.kin-nav a{display:inline-block; font:500 16px var(--sans); color:var(--ivory)!important; text-decoration:none; padding:.75em 0; background:linear-gradient(var(--gold-bright),var(--gold-bright)) 0 calc(100% - 8px)/0 1px no-repeat; transition:background-size .3s var(--ease)}
.kin-nav a:hover,.kin-nav a[aria-current="page"]{background-size:100% 1px}
.kin-hpill{display:inline-flex; align-items:center; gap:.8em; min-height:44px; padding:.5em .55em .5em 1.2em; border-radius:999px; background:var(--gold-bright); color:var(--green-deep)!important; font:500 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; text-decoration:none}
.kin-hpill:hover{background:#DDB46A}
.kin-hpill .arr{display:grid; place-items:center; width:2em; height:2em; border-radius:50%; background:var(--green-deep); color:var(--gold-bright); font:400 14px/1 var(--sans); letter-spacing:0}
.kin-hpill.ghost{background:transparent; border:1px solid var(--green); color:var(--green)!important}
.kin-hpill.ghost .arr{background:var(--green); color:var(--ivory)}
.kin-burger{display:none; width:48px; height:48px; border-radius:50%; border:1px solid var(--ivory); background:transparent; color:var(--ivory); cursor:pointer; position:relative; padding:0}
.kin-burger span{position:absolute; left:14px; right:14px; height:1.5px; background:currentColor; transition:transform .3s var(--ease), opacity .2s}
.kin-burger span:nth-child(1){top:18px}.kin-burger span:nth-child(2){top:23px}.kin-burger span:nth-child(3){top:28px}
.kin-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.kin-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.kin-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.kin-drawer{--focus:var(--green); position:fixed; z-index:99980; left:12px; right:12px; bottom:12px; top:84px; border-radius:var(--arch); background:var(--ivory); color:var(--green); display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:0 24px 40px; transform:translateY(105%); visibility:hidden; transition:transform .55s var(--ease), visibility 0s .55s}
.kin-drawer.is-open{transform:none; visibility:visible; transition:transform .55s var(--ease), visibility 0s}
.kin-drawer ul{list-style:none; padding:0; margin:0 0 28px; text-align:center}
.kin-drawer li a{display:block; font:400 clamp(2rem,9vw,2.6rem)/1.25 var(--serif); color:var(--green)!important; text-decoration:none; padding:.12em .4em}
.kin-drawer li a:hover{color:var(--gold-ink)!important}
.kin-drawer .kin-hpill{margin:6px}
.kin-drawer-mark{width:44px; height:44px; margin:22vh 0 auto}
.kin-drawer-contact{font:400 14px var(--mono); color:var(--muted); margin-top:20px; text-align:center}
.kin-drawer-contact a{color:var(--green)!important}
@media (max-width:980px){
  .kin-nav,.kin-bar > .kin-hpill{display:none}
  .kin-burger{display:block}
}
/* Theme Builder header section wrapper */
#page-container .kin-header-sec,.et-l--header .kin-header-sec{padding:0!important; background:transparent!important}

/* 5. SECTION SCHEMES -------------------------------------------------- */
#page-container .kin-deep{--bg:var(--green-deep)}
#page-container .kin-mid{--bg:var(--green-mid)}
#page-container .kin-light{--bg:var(--ivory); --fg:var(--green); --soft:var(--muted); --accent:var(--gold-ink); --line:rgba(16,44,40,.22); --focus:var(--green)}
#page-container .kin-flow-top{padding-top:clamp(24px,4vw,64px)}
#page-container .kin-flow-bottom{padding-bottom:0}

/* 6. TEXT COMPONENTS -------------------------------------------------- */
#page-container .kin-eyebrow{font:500 12px/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
#page-container .kin-dot{display:inline-block; width:4px; height:12px; background:var(--red); margin-right:.8em; vertical-align:-.1em}
#page-container .kin-chip{display:inline-block; background:var(--red); color:var(--ivory); padding:.45em .9em; border-radius:2px}
#page-container .kin-h2{font-size:clamp(2.2rem,4.6vw,4rem); margin-top:14px}
#page-container .kin-lead{color:var(--soft); max-width:44ch}
#page-container .kin-body{color:var(--soft); max-width:56ch; margin-top:24px!important}
#page-container .kin-body p + p{margin-top:14px}
#page-container .kin-sec-head{display:flex!important; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap}
#page-container .kin-sec-head::after{display:none}
#page-container .kin-sec-head .et_pb_column{width:auto!important; margin:0!important; float:none}
@media (max-width:980px){#page-container .kin-sec-head{display:block!important} #page-container .kin-sec-head .et_pb_column + .et_pb_column{margin-top:20px!important}}

/* media frames + fallback surface */
#page-container .kin-media .et_pb_image_wrap{position:relative; overflow:hidden; background:radial-gradient(120% 80% at 50% 10%, rgba(206,159,76,.26), transparent 60%), linear-gradient(170deg, var(--green-mid), var(--green-deep))}
#page-container .kin-media .et_pb_image_wrap::after{content:""; position:absolute; inset:14px; border:1px solid rgba(206,159,76,.38); border-radius:inherit; pointer-events:none; z-index:2}
#page-container .kin-media img{display:block; width:100%; height:100%; object-fit:cover}
img.kin-broken{opacity:0}

/* slat mask (inspired by the bar's slat walls) */
@property --gap{syntax:'\3c length\3e '; inherits:false; initial-value:5px}
#page-container .kin-slatted .et_pb_image_wrap{--gap:5px;
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 calc(var(--slat-w) - var(--gap)),transparent calc(var(--slat-w) - var(--gap)) var(--slat-w));
          mask-image:repeating-linear-gradient(90deg,#000 0 calc(var(--slat-w) - var(--gap)),transparent calc(var(--slat-w) - var(--gap)) var(--slat-w));
  transition:--gap 1.6s var(--ease)}
.js #page-container .kin-slatted:not(.kin-in) .et_pb_image_wrap{--gap:var(--slat-w)}

/* 7. HERO ------------------------------------------------------------- */
#page-container .kin-hero{padding-top:150px; padding-bottom:clamp(96px,10vw,140px)}
#page-container .kin-h1{font-size:clamp(3rem,7.4vw,6.6rem); line-height:.98; margin:22px 0 28px}
#page-container .kin-h1 .ln,#page-container .kin-h1-sm .ln{display:block; overflow:hidden; padding:0 .08em .2em 0; margin-bottom:-.14em}
#page-container .kin-h1 .ln > span,#page-container .kin-h1-sm .ln > span{display:inline-block}
.js #page-container .kin-h1 .ln > span,.js #page-container .kin-h1-sm .ln > span{transform:translateY(105%)}
.js.kin-loaded #page-container .kin-h1 .ln > span,.js.kin-loaded #page-container .kin-h1-sm .ln > span{transform:none; transition:transform 1.1s var(--ease)}
.js.kin-loaded #page-container .ln:nth-child(2) > span{transition-delay:.12s}
.js.kin-loaded #page-container .ln:nth-child(3) > span{transition-delay:.24s}
.js.kin-loaded #page-container .ln:nth-child(4) > span{transition-delay:.36s}
#page-container .kin-hero .kin-lead{font-size:1.2rem; max-width:34ch}
/* hero background photo: section class "kin-hero-photo" + Section > Background > Image.
   The tint keeps every line of hero text at AA contrast and fades the photo into the green. */
#page-container .kin-hero-photo{background-size:cover!important; background-position:50% 40%!important}
#page-container .kin-hero-photo::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:
  linear-gradient(90deg, rgba(16,44,40,.93) 0%, rgba(16,44,40,.88) 42%, rgba(16,44,40,.55) 68%, rgba(16,44,40,.42) 100%),
  linear-gradient(180deg, rgba(16,44,40,.6) 0%, rgba(16,44,40,0) 22%, rgba(16,44,40,0) 48%, rgba(16,44,40,.75) 78%, var(--green) 100%)}
#page-container .kin-hero-photo > .et_pb_row{position:relative; z-index:1}
@media (max-width:980px){
  #page-container .kin-hero-photo::before{background:linear-gradient(180deg, rgba(16,44,40,.9) 0%, rgba(16,44,40,.88) 45%, rgba(16,44,40,.9) 75%, var(--green) 100%)}
}
/* hero art column: class "kin-hero-art" */
#page-container .kin-hero-art{position:relative; aspect-ratio:460/600; max-width:460px; margin-left:auto!important}
#page-container .kin-hero-art .kin-arch{position:absolute; inset:0; z-index:1}
#page-container .kin-hero-art .kin-arch .et_pb_image_wrap{height:100%; border-radius:var(--arch)}
#page-container .kin-hero-art .kin-arch img{height:118%; margin-top:-9%}
/* decorative Code modules (class "kin-decor") position against their column */
#page-container .kin-decor,#page-container .kin-decor .et_pb_code_inner{position:static!important; margin:0!important}
.kin-slat-panel{position:absolute; inset:72px -48px -36px 46%; border-radius:4px; background:repeating-linear-gradient(90deg, rgba(247,243,236,.035) 0 14px, transparent 14px 22px); pointer-events:none; z-index:0}
.kin-rule-v{position:absolute; left:-30px; top:-30px; bottom:120px; width:1px; background:rgba(206,159,76,.55); z-index:0}
.kin-arch-ring{position:absolute; inset:-26px 40px 60px -40px; border:1px solid rgba(206,159,76,.6); border-radius:var(--arch); pointer-events:none; z-index:0}
.kin-seal{position:absolute; left:-64px; bottom:56px; width:150px; height:150px; z-index:3}
.kin-seal--right{left:auto; right:-24px; bottom:40px}
.kin-seal svg{width:100%; height:100%; will-change:transform}
.kin-seal .core{position:absolute; inset:40px; border-radius:50%; background:var(--grain) center/180px, var(--walnut); display:grid; place-items:center}
.kin-seal .core img{width:44px; height:44px}
.js #page-container .kin-arch-wipe{clip-path:inset(100% 0 0 0 round 999px 999px 12px 12px); transition:clip-path 1.3s var(--ease)}
.js #page-container .kin-arch-wipe.kin-in{clip-path:inset(0 0 0 0 round 999px 999px 12px 12px)}
@media (max-width:980px){
  #page-container .kin-hero-art{margin:48px auto 0!important; width:min(380px,82%)}
  .kin-seal{left:-36px; width:120px; height:120px}
  .kin-seal .core{inset:32px}
  .kin-seal--right{left:auto; right:-28px}
  .kin-slat-panel{right:-20px}
}

/* 8. ABOUT (eclipse) + FEATURED COCKTAIL ----------------------------- */
#page-container .kin-about .kin-rule-copy{display:grid; grid-template-columns:auto 1fr; gap:22px; margin-top:36px; max-width:56ch}
#page-container .kin-about .kin-rule-copy .rule{width:56px; height:1px; background:var(--gold); margin-top:.85em}
#page-container .kin-about .kin-rule-copy p{color:var(--soft)}
#page-container .kin-about .kin-rule-copy p + p{margin-top:14px; font:italic 400 1.3rem/1.5 var(--serif); color:var(--fg)}
#page-container .kin-about .kin-h2{font-size:clamp(2.4rem,5vw,4.4rem)}

/* eclipse composition - column class "kin-eclipse" (+ "kin-eclipse--mirror") */
#page-container .kin-eclipse{position:relative; height:clamp(420px,46vw,600px)}
#page-container .kin-eclipse .kin-ec-cap,#page-container .kin-eclipse .kin-ec-circle{position:absolute}
#page-container .kin-eclipse .kin-ec-cap{width:52%; height:88%; left:6%; top:0; z-index:1}
#page-container .kin-eclipse .kin-ec-cap .et_pb_image_wrap{height:100%; border-radius:999px}
#page-container .kin-eclipse .kin-ec-circle{width:50%; aspect-ratio:1; left:42%; top:46%; z-index:3}
#page-container .kin-eclipse .kin-ec-circle .et_pb_image_wrap{height:100%; border-radius:50%; outline:12px solid var(--bg)}
#page-container .kin-eclipse img{height:120%!important; margin-top:-10%}
.kin-ec-ring{position:absolute; width:50%; aspect-ratio:1; left:calc(42% - 34px); top:calc(46% - 34px); border:1px solid rgba(206,159,76,.75); border-radius:50%; z-index:2; pointer-events:none}
.kin-ec-bar{position:absolute; right:4%; top:14%; width:12px; height:38%; background:var(--red); z-index:1}
#page-container .kin-eclipse--mirror{height:clamp(520px,52vw,660px)}
#page-container .kin-eclipse--mirror .kin-ec-cap{left:auto; right:6%}
#page-container .kin-eclipse--mirror .kin-ec-circle{left:8%}
#page-container .kin-eclipse--mirror .kin-ec-ring{left:calc(8% + 34px)}
#page-container .kin-eclipse--mirror .kin-ec-bar{right:auto; left:4%}
#page-container .kin-ec-badge{position:absolute; right:0; bottom:2%; width:136px; height:136px; border-radius:50%; background:var(--red); color:var(--ivory); display:grid; place-items:center; text-align:center; font:500 12px/1.35 var(--mono); padding:16px; z-index:4}
#page-container .kin-ec-badge strong{display:block; font:400 2.4rem/1 var(--serif); margin-bottom:4px}
@media (max-width:980px){#page-container .kin-eclipse{margin-top:56px!important}}
@media (max-width:767px){#page-container .kin-ec-badge{width:112px; height:112px}}

/* featured cocktail - ivory section, green card column "kin-spot-card" */
#page-container .kin-spot-img{max-width:520px}
#page-container .kin-spot-img .et_pb_image_wrap{aspect-ratio:4/5; border-radius:4px}
#page-container .kin-spot-img .et_pb_image_wrap::after{border-radius:2px}
#page-container .kin-spot-img img{height:112%!important; margin-top:-6%; object-position:50% 40%}
#page-container .kin-spot-card{
  --bg:var(--green); --fg:var(--ivory); --soft:var(--sage); --accent:var(--gold-bright); --line:rgba(247,243,236,.22); --focus:var(--gold-bright);
  background:var(--green); color:var(--ivory); border-radius:4px 180px 4px 4px;
  padding:clamp(48px,6vw,72px) clamp(56px,8vw,110px) 48px clamp(28px,4vw,56px)!important;
  margin-left:-96px!important; position:relative; z-index:3; box-shadow:0 40px 80px -40px rgba(9,30,27,.7)}
#page-container .kin-spot-card .kin-h2{font-size:clamp(2.2rem,4vw,3.4rem); margin:14px 0 18px}
#page-container .kin-tribute{font:italic 400 1.2rem/1.55 var(--serif)}
#page-container .kin-recipe{margin-top:22px!important; padding-top:22px; border-top:1px solid var(--line); font-size:.95rem; color:var(--soft)}
#page-container .kin-spot-card .et_pb_button_module_wrapper{margin-top:30px}
@media (max-width:980px){
  #page-container .kin-spot-img{margin:0 auto}
  #page-container .kin-spot-card{margin:-120px 12px 0!important; width:auto!important}
}

/* 9. SIGNATURE COCKTAILS (Blurb modules, class "kin-drink") ---------- */
#page-container .kin-grid4{display:flex!important; flex-wrap:wrap}
#page-container .kin-grid4::after{display:none}
#page-container .kin-grid4 .et_pb_column{display:flex}
#page-container .kin-grid4 + .kin-grid4{margin-top:24px}
@media (max-width:980px){#page-container .kin-grid4 .et_pb_column{margin-bottom:24px!important} #page-container .kin-grid4 + .kin-grid4{margin-top:0}}
#page-container .kin-drink{flex:1; background:var(--green-mid); border-radius:6px; padding:44px 26px 32px; text-align:center}
#page-container .kin-drink .et_pb_main_blurb_image{margin:0 auto 24px!important}
#page-container .kin-drink .et_pb_image_wrap{display:grid!important; place-items:center; width:110px; height:110px; margin:0 auto; border-radius:50%; background:var(--grain) center/260px, var(--walnut); box-shadow:inset 0 0 0 1px rgba(206,159,76,.25)}
#page-container .kin-drink .et_pb_main_blurb_image img{width:76px; height:76px; object-fit:contain}
#page-container .kin-drink h3,#page-container .kin-drink .et_pb_module_header{font-size:1.55rem; line-height:1.15; margin-bottom:14px; padding:0}
#page-container .kin-drink .et_pb_blurb_description{font-size:.95rem; line-height:1.6; color:var(--sage)}
#page-container .kin-center-btn{text-align:center}

/* 10. PRIVATE EVENTS TEASER ----------------------------------------- */
#page-container .kin-events .kin-h2{font-size:clamp(2.1rem,4vw,3.5rem); line-height:1.08}
#page-container .kin-vibe{margin-top:30px!important; padding:24px 26px; border-left:4px solid var(--red); border-radius:0 12px 12px 0; background:linear-gradient(rgba(62,42,30,.82),rgba(62,42,30,.82)), var(--grain) center/260px, var(--walnut)}
#page-container .kin-vibe h3{font:500 12px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:8px}
#page-container .kin-vibe p{font:italic 400 1.12rem/1.6 var(--serif)}
#page-container .kin-tags{margin-top:34px!important}
#page-container .kin-tags h3{font:500 12px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--soft); margin-bottom:14px}
#page-container .kin-tags ul{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0}
#page-container .kin-tags li{border:1px solid rgba(247,243,236,.5); border-radius:999px; padding:.45em 1em; font:400 .88rem var(--sans); list-style:none}
#page-container .kin-note{font:400 14px var(--mono); color:var(--soft)}

/* 11. VISIT US + FOOTER --------------------------------------------- */
#page-container .kin-venue{background:var(--green-deep); border:1px solid rgba(206,159,76,.3); border-top:4px solid var(--red); border-radius:6px; overflow:hidden; padding-bottom:36px!important}
#page-container .kin-venue .kin-venue-img .et_pb_image_wrap{aspect-ratio:16/10}
#page-container .kin-venue .kin-venue-img .et_pb_image_wrap::after{display:none}
#page-container .kin-venue .et_pb_text{padding:30px 34px 0}
#page-container .kin-venue h3{font-size:clamp(2rem,3.4vw,2.8rem); margin-bottom:16px}
#page-container .kin-venue h4{font:500 12px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:4px}
#page-container .kin-venue address{font-style:normal}
#page-container .kin-venue .et_pb_button_module_wrapper{display:inline-block; margin:24px 0 0 34px}
#page-container .kin-venue .et_pb_button_module_wrapper + .et_pb_button_module_wrapper{margin-left:10px}
@media (max-width:980px){#page-container .kin-venue{margin-bottom:32px!important}}

#page-container .kin-footer{padding:clamp(80px,9vw,120px) 0 40px}
#kin-embers{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
#page-container .kin-footer .et_pb_row{position:relative; z-index:1}
#page-container .kin-footer .kin-h2{font-size:clamp(2rem,4.2vw,3.6rem); line-height:1.1; margin:0}
#page-container .kin-foot-links .et_pb_button_module_wrapper{margin-bottom:12px}
#page-container .kin-socials{display:flex; gap:22px; font:400 14px var(--mono)}
#page-container .kin-socials a{text-underline-offset:4px; padding:.6em 0; display:inline-block}
#page-container .kin-foot-bottom{display:flex; align-items:center; gap:20px; flex-wrap:wrap; font:400 13px var(--mono); color:var(--sage)}
#page-container .kin-foot-bottom img{height:36px; width:auto}
#page-container .kin-foot-bottom a{display:inline-block; padding:5px 0; text-underline-offset:3px}
#page-container .kin-foot-contact{margin-left:auto; display:flex; flex-wrap:wrap; gap:8px 28px}
#page-container .kin-foot-contact a{color:var(--gold-bright)!important}
@media (min-width:981px){#page-container .kin-foot-links{display:flex!important; flex-direction:column; align-items:flex-start; margin-left:auto!important}}
@media (max-width:980px){#page-container .kin-foot-contact{margin-left:0; width:100%} #page-container .kin-foot-links{margin-top:32px!important}}
#page-container .kin-footer .kin-row-bottom{margin-top:72px}

/* 12. BOOK YOUR EVENT PAGE ------------------------------------------ */
#page-container .kin-h1-sm{font-size:clamp(2.3rem,4.8vw,4.4rem); line-height:1.04; margin:22px 0 28px}
#page-container .kin-bk-hero .kin-lead{max-width:52ch; font-size:1.12rem}
#page-container .kin-bk-art{aspect-ratio:420/560; max-width:420px}
/* gallery - column class "kin-gallery" */
#page-container .kin-gallery{position:relative; height:clamp(440px,46vw,580px)}
#page-container .kin-gallery .kin-g1,#page-container .kin-gallery .kin-g2,#page-container .kin-gallery .kin-g3{position:absolute}
#page-container .kin-gallery .kin-g1{width:40%; height:84%; left:0; top:4%}
#page-container .kin-gallery .kin-g1 .et_pb_image_wrap{height:100%; border-radius:999px}
#page-container .kin-gallery .kin-g2{width:54%; height:56%; right:0; top:0}
#page-container .kin-gallery .kin-g2 .et_pb_image_wrap{height:100%; border-radius:4px 140px 4px 4px}
#page-container .kin-gallery .kin-g3{width:40%; aspect-ratio:1; right:12%; bottom:0; z-index:2}
#page-container .kin-gallery .kin-g3 .et_pb_image_wrap{height:100%; border-radius:50%; outline:12px solid var(--bg)}
#page-container .kin-gallery img{height:118%!important; margin-top:-9%}
.kin-g-bar{position:absolute; left:43%; bottom:6%; width:12px; height:30%; background:var(--red)}
@media (max-width:980px){#page-container .kin-gallery{margin-top:56px!important}}
/* floor plan */
#page-container .kin-plan{background:var(--ivory); border-top:4px solid var(--red); border-radius:6px; padding:clamp(16px,2.4vw,28px)}
#page-container .kin-plan .et_pb_image_wrap::after{display:none}
#page-container .kin-plan img{width:100%; height:auto; background:var(--ivory-2); min-height:220px}
#page-container .kin-plan-caption{font:400 13px/1.5 var(--mono); color:var(--muted); margin-top:14px; padding:0 clamp(16px,2.4vw,28px) clamp(16px,2.4vw,28px)}
#page-container .kin-plan-col{background:var(--ivory); border-radius:6px; overflow:hidden}
#page-container .kin-plan-col .kin-plan{border-radius:6px 6px 0 0}
#page-container .kin-fact{background:var(--green-mid); border-radius:6px; padding:22px 24px; margin-bottom:14px!important}
#page-container .kin-fact h3{font:500 12px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:6px}
#page-container .kin-fact p{font:400 1.35rem/1.3 var(--serif)}
#page-container .kin-fact--wood{background:linear-gradient(rgba(62,42,30,.82),rgba(62,42,30,.82)), var(--grain) center/260px, var(--walnut)}
@media (max-width:980px){#page-container .kin-plan-col{margin-bottom:24px!important}}
/* form section */
@media (min-width:981px){#page-container .kin-form-intro{position:sticky; top:110px}}
#page-container .kin-form-intro .kin-h2{font-size:clamp(2.4rem,4.6vw,4rem); margin:14px 0 22px}
#page-container .kin-form-card{
  --fg:var(--green); --soft:var(--muted); --accent:var(--gold-ink); --focus:var(--green);
  background:var(--ivory); color:var(--green); border-radius:6px 160px 6px 6px; padding:clamp(40px,5vw,64px) clamp(28px,4vw,56px) clamp(28px,4vw,56px)!important}
#page-container .kin-form-card h3{font-size:1.9rem; margin-bottom:6px}
#page-container .kin-form-card .kin-req-note{font-size:.92rem; color:var(--muted); margin-bottom:28px}
#page-container .kin-req{color:var(--red); text-decoration:none}
@media (max-width:980px){#page-container .kin-form-card{border-radius:6px 90px 6px 6px; margin-top:40px!important}}

/* 13. FORM STYLING (works with Gravity Forms, WPForms, Divi Contact Form, Forminator) */
#page-container .kin-form-card label,#page-container .kin-form-card legend,
#page-container .kin-form-card .gfield_label,#page-container .kin-form-card .wpforms-field-label{font:500 15px/1.4 var(--sans)!important; color:var(--green)!important}
#page-container .kin-form-card input[type=text],#page-container .kin-form-card input[type=email],#page-container .kin-form-card input[type=tel],
#page-container .kin-form-card input[type=number],#page-container .kin-form-card input[type=date],#page-container .kin-form-card select,#page-container .kin-form-card textarea{
  font:400 16px var(--sans)!important; color:var(--green)!important; background:#fff!important; border:1px solid var(--muted)!important; border-radius:8px!important; padding:.75em .85em!important; min-height:48px; width:100%; box-shadow:none!important}
#page-container .kin-form-card input:focus,#page-container .kin-form-card select:focus,#page-container .kin-form-card textarea:focus{outline:2px solid var(--green)!important; outline-offset:2px; border-color:var(--green)!important}
#page-container .kin-form-card [aria-invalid="true"],#page-container .kin-form-card .gfield_error input,#page-container .kin-form-card .gfield_error select,#page-container .kin-form-card .wpforms-error:is(input,select,textarea){border:2px solid var(--red)!important}
#page-container .kin-form-card .gfield_required,#page-container .kin-form-card .wpforms-required-label{color:var(--red)!important}
#page-container .kin-form-card .validation_message,#page-container .kin-form-card .gfield_validation_message,#page-container .kin-form-card label.wpforms-error,#page-container .kin-form-card .et_contact_error{color:var(--red)!important; font:500 14px var(--sans)!important; background:none!important; border:0!important; padding:4px 0 0!important}
#page-container .kin-form-card .gform_validation_errors,#page-container .kin-form-card .wpforms-error-container{border:2px solid var(--red)!important; border-radius:8px; background:#fff!important; box-shadow:none!important}
#page-container .kin-form-card .gform_validation_errors h2,#page-container .kin-form-card .gform_validation_errors *{color:var(--red)!important}
#page-container .kin-form-card .gfield_description,#page-container .kin-form-card .wpforms-field-description{color:var(--muted)!important; font-size:14px!important}
#page-container .kin-form-card input[type=radio],#page-container .kin-form-card input[type=checkbox]{accent-color:var(--green); width:20px; height:20px}
#page-container .kin-form-card .gchoice,#page-container .kin-form-card .wpforms-field-radio li{min-height:44px; display:flex; align-items:center; gap:8px}
#page-container .kin-form-card input[type=submit],#page-container .kin-form-card button[type=submit],#page-container .kin-form-card .et_pb_contact_submit{
  display:inline-flex!important; align-items:center; min-height:48px; padding:.7em 1.6em!important; border-radius:999px!important; border:0!important;
  background:var(--green)!important; color:var(--ivory)!important; font:500 13px/1 var(--mono)!important; letter-spacing:.12em!important; text-transform:uppercase; cursor:pointer}
#page-container .kin-form-card input[type=submit]:hover,#page-container .kin-form-card button[type=submit]:hover{background:var(--green-mid)!important}
#page-container .kin-form-placeholder{border:2px dashed var(--muted); border-radius:8px; padding:28px; color:var(--muted); text-align:center}

/* LINKS IN BODY TEXT - underlined so they don't rely on color alone (WCAG 1.4.1).
   Gold link (#CE9F4C) vs ivory text is only 2.2:1, so color can't be the only cue. */
#page-container .et_pb_text_inner a:not(.et_pb_button),#page-container .entry-content a:not(.et_pb_button){text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}

/* REVEALS - fail-safe: hidden only after kin-divi.js boots ---------- */
.js #page-container .kin-reveal{opacity:0; transform:translateY(32px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.js #page-container .kin-reveal.kin-in{opacity:1; transform:none}
.js #page-container .kin-d1{transition-delay:.1s}.js #page-container .kin-d2{transition-delay:.2s}

/* WINDOWS HIGH CONTRAST */
@media (forced-colors:active){
  body #page-container a.et_pb_button.kin-pill,.kin-burger,.kin-hpill{border:1px solid ButtonText!important}
  #page-container .kin-slatted .et_pb_image_wrap{-webkit-mask-image:none; mask-image:none}
  #page-container .kin-media .et_pb_image_wrap::after{display:none}
}

/* REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #page-container *,#page-container *::before,#page-container *::after,.kin-header *,.kin-drawer{transition-duration:.01ms!important; transition-delay:0s!important; animation:none!important}
  .js #page-container .kin-reveal,.js #page-container .kin-h1 .ln > span,.js #page-container .kin-h1-sm .ln > span{opacity:1; transform:none}
  .js #page-container .kin-arch-wipe{clip-path:none}
  .js #page-container .kin-slatted:not(.kin-in) .et_pb_image_wrap{--gap:5px}
  #kin-embers{display:none}
}

/* footer ember canvas row (row class "kin-embers-row") fills the whole footer */
#page-container .kin-footer .kin-embers-row,#page-container .kin-footer .kin-embers-row .et_pb_column{position:static!important; padding:0!important; margin:0!important; height:0; min-height:0}
#page-container .kin-footer .kin-embers-row + .et_pb_row{margin-top:0}

/* =====================================================================
   FIX (Oct 13): Theme Builder header takes up no space, so the hero photo
   runs up behind the menu; pages without a Kin hero get a solid header
   and a readable ivory page style.
   ===================================================================== */
/* collapse the Theme Builder header wrapper - the real header is position:fixed */
.et-l--header .kin-header-sec,
.et-l--header .kin-header-sec .et_pb_row,
.et-l--header .kin-header-sec .et_pb_column,
.et-l--header .kin-header-sec .et_pb_module,
.et-l--header .kin-header-sec .et_pb_code_inner{padding:0!important; margin:0!important; min-height:0!important; height:0; width:100%!important; max-width:none!important; background:transparent!important}

/* pages built outside the kit (Privacy Policy, etc.): solid header + room below it */
body:not(:has(.kin-hero)) .kin-header{background:rgba(9,30,27,.94); box-shadow:0 1px 0 rgba(206,159,76,.28)}
body:not(:has(.kin-hero)) #main-content{padding-top:96px}
/* ivory reading surface with AA-safe green text and gold-ink accents */
body:not(:has(.kin-hero)) #main-content,
body:not(:has(.kin-hero)) #main-content .et_pb_section{background-color:var(--ivory)!important}
body:not(:has(.kin-hero)) #main-content{color:var(--green); --focus:var(--green)}
body:not(:has(.kin-hero)) #main-content :is(p,li,td,th,dd,dt,span,strong,em){color:inherit}
body:not(:has(.kin-hero)) #main-content :is(h1,h2,h3,h4,h5,h6){color:var(--green)}
body:not(:has(.kin-hero)) #main-content h1{color:var(--gold-ink)}
body:not(:has(.kin-hero)) #main-content a:not(.et_pb_button){color:var(--green)}

/* FIX (Oct 13, form labels): plugins with "floating" labels (Forminator's Material
   style, and others) tuck the label inside the field; the kit's solid white
   inputs then cover it. Pin every field label above its field instead.
   Divi's own Contact Form hides labels in favor of placeholders - show them too. */
#page-container .kin-form-card .forminator-label,
#page-container .kin-form-card .forminator-field > label,
#page-container .kin-form-card .et_pb_contact_form_label,
#page-container .kin-form-card .gfield_label,
#page-container .kin-form-card .wpforms-field-label{
  position:static!important; transform:none!important; display:block!important; float:none!important;
  width:auto!important; height:auto!important; clip:auto!important; clip-path:none!important; overflow:visible!important;
  white-space:normal!important; opacity:1!important; visibility:visible!important; background:none!important;
  margin:0 0 6px!important; padding:0!important; pointer-events:auto!important;
  font:500 15px/1.4 var(--sans)!important; color:var(--green)!important}
#page-container .kin-form-card .forminator-field{display:flex!important; flex-direction:column!important}
/* time/name sub-fields: keep their small labels (Hours, Minutes, AM/PM) visible too */
#page-container .kin-form-card .forminator-description{font-size:14px!important; color:var(--muted)!important}
/* placeholders are hints only - keep them AA-readable */
#page-container .kin-form-card ::placeholder{color:var(--muted)!important; opacity:1!important}