/* ══════════════════════════════════════════════════════════
   BAIRILLE & EMBER — "the painting" color layer
   Colors and textures taken from the backgrounds of the
   brand paintings (gold leaf, oxblood, emerald, sapphire,
   plum, black ink, drips). Layout is unchanged: this file
   only adds color, texture and light on top of styles.css.
   ══════════════════════════════════════════════════════════ */

:root{
  /* sampled from the painting backgrounds */
  --leaf:#E4C18E;        /* pale gold leaf highlight */
  --leaf-2:#C6A15B;      /* house gold (unchanged) */
  --amber:#B87231;       /* burnished amber leaf */
  --oxblood:#8C1114;     /* crimson stroke */
  --oxblood-2:#5E0E10;
  --emerald:#0B6B4E;     /* emerald stroke */
  --emerald-2:#17402F;
  --sapphire:#2B3E9C;    /* Ember in blue */
  --plum:#5C2A63;        /* violet streak */
  --ivory:#F1E6D0;
  --ink-paint:#0A0707;

  --gold-foil:linear-gradient(100deg,#8A5E22 0%,#C6A15B 22%,#F3DDA6 42%,#D9B26A 58%,#9C6B2A 80%,#E4C18E 100%);
  --paint-rule:linear-gradient(90deg,transparent 0%,var(--oxblood) 14%,var(--amber) 32%,var(--leaf) 50%,var(--emerald) 68%,var(--sapphire) 84%,transparent 100%);
}

/* ── age gate: dark gold-leaf canvas ── */
.gate{
  background:#080706 url("img/art-noir.webp") center/cover no-repeat;
}
.gate::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 60% at 50% 50%,rgba(8,7,6,.9),rgba(8,7,6,.62) 62%,rgba(8,7,6,.25) 100%);
}

/* ── hero: the noir canvas behind the wordmark and the cigar ── */
.hero{
  background:
    linear-gradient(to bottom,rgba(10,7,7,.15) 0%,rgba(10,7,7,.55) 55%,rgba(10,7,7,.92) 100%),
    var(--ink-paint) url("img/art-noir.webp") center top/cover no-repeat;
}
.hero::before{ /* keep the center calm for the wordmark */
  background:
    radial-gradient(48% 38% at 50% 22%,rgba(10,7,7,.78),rgba(10,7,7,.35) 70%,transparent 100%),
    radial-gradient(75% 60% at 50% 48%,rgba(198,161,91,.06),transparent 70%);
}
/* let the canvas show through the photo's black ground; the lit cigar stays on top */
.stage__img{mix-blend-mode:lighten}
.wordmark{text-shadow:0 2px 24px rgba(0,0,0,.55)}
.wordmark .amp,.foot__wm .amp{
  background:var(--gold-foil);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--leaf-2);
}
.tagline{color:var(--leaf);text-shadow:0 1px 14px rgba(0,0,0,.7)}
.hero .eyebrow{color:var(--leaf)}

/* gold-foil primary button; crimson glow on hover */
.btn--solid{background:var(--gold-foil);background-size:160% 100%;background-position:0 0;color:#140D06;
  transition:background-position .6s ease,box-shadow .35s ease}
.btn--solid:hover{background:var(--gold-foil);background-size:160% 100%;background-position:100% 0;
  box-shadow:0 0 0 1px rgba(140,17,20,.55),0 8px 28px -10px rgba(140,17,20,.75)}

/* social-media countdown (top corner) on the same painted glass */
.social-corner{background:rgba(10,7,7,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-image:var(--paint-rule) 1}

/* a slow gold-leaf sheen across the ampersand */
@media (prefers-reduced-motion:no-preference){
  .wordmark .amp{background-size:220% 100%;animation:leaf 9s ease-in-out infinite}
  @keyframes leaf{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
}

/* the key-dates bar sits on painted glass */
.when{
  background:rgba(10,7,7,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-image:var(--paint-rule) 1;
}
.field input{background:rgba(10,7,7,.6)}

/* ── invitation: the jewel canvas (crimson, emerald, gold leaf) on the edges ── */
.invite{
  position:relative;isolation:isolate;
  border-top:0;
  background:var(--ink-paint) url("img/art-jewel.webp") center/cover no-repeat;
}
.invite::before{ /* calm center column so every line of text stays readable */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,7,7,.08) 0%,rgba(10,7,7,.5) 18%,rgba(10,7,7,.9) 32%,rgba(10,7,7,.93) 50%,rgba(10,7,7,.9) 68%,rgba(10,7,7,.5) 82%,rgba(10,7,7,.08) 100%),
    linear-gradient(to bottom,rgba(10,7,7,.85) 0%,transparent 14%,transparent 86%,rgba(10,7,7,.85) 100%);
}
.invite::after{ /* painted rule across the top edge */
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--paint-rule);opacity:.9;
}
.invite .eyebrow{color:var(--leaf)}
.announce{color:var(--leaf)}
.dates{border-top-color:rgba(228,193,142,.28)}
.dates__row{border-bottom-color:rgba(228,193,142,.2)}

/* ── whisper: sapphire, plum and gold ── */
.whisper{
  position:relative;isolation:isolate;border-top:0;
  background:var(--ink-paint) url("img/art-sapphire.webp") center 38%/cover no-repeat;
}
.whisper::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(46% 110% at 50% 50%,rgba(10,7,7,.9),rgba(10,7,7,.55) 62%,rgba(10,7,7,.18) 100%);
}
.whisper__t{color:var(--leaf);text-shadow:0 1px 12px rgba(0,0,0,.8)}

/* ── footer: the page ends back in the painting (dim gold leaf rising from the bottom) ── */
.foot{position:relative;isolation:isolate;border-top:0;
  background:var(--ink-paint) url("img/art-noir-foot.webp") center bottom/cover no-repeat}
.foot::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 55% at 50% 100%,rgba(10,7,7,.94),rgba(10,7,7,0) 100%),linear-gradient(to bottom,rgba(10,7,7,.96) 0%,rgba(10,7,7,.9) 55%,rgba(10,7,7,.66) 100%)}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--paint-rule);opacity:.8}

::selection{background:var(--oxblood);color:var(--ivory)}

/* phones: lighter image files */
@media (max-width:860px){
  .gate{background-image:url("img/art-noir-m.webp")}
  .hero{background-image:
    linear-gradient(to bottom,rgba(10,7,7,.2) 0%,rgba(10,7,7,.6) 55%,rgba(10,7,7,.94) 100%),
    url("img/art-noir-m.webp")}
  .invite{background-image:url("img/art-jewel-m.webp")}
  /* phones: frame on the painting's left third, where the crimson, emerald and gold strokes live */
  .invite{background-size:cover;background-position:14% center}
  .invite::before{background:
    linear-gradient(to bottom,rgba(10,7,7,.05) 0%,rgba(10,7,7,.5) 7%,rgba(10,7,7,.86) 15%,rgba(10,7,7,.9) 50%,rgba(10,7,7,.86) 86%,rgba(10,7,7,.5) 93%,rgba(10,7,7,.05) 100%)}
  .whisper{background-image:url("img/art-sapphire-m.webp")}
  .foot{background-image:url("img/art-noir-foot-m.webp");background-position:12% bottom}
  .foot::after{background:radial-gradient(70% 40% at 50% 100%,rgba(10,7,7,.92),rgba(10,7,7,0) 100%),linear-gradient(to bottom,rgba(10,7,7,.96) 0%,rgba(10,7,7,.9) 55%,rgba(10,7,7,.72) 100%)}
}
@media (prefers-reduced-transparency:reduce){
  .when{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,7,7,.9)}
}

/* ── fix: on 360px phones the dates bar ran 11px past the screen (sideways scroll). Same look, cells may now shrink. ── */
@media (max-width:860px){
  .hero__foot{width:100%;min-width:0}
  .when{grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:calc(100% - 2.5rem)}
  .when__cell{min-width:0}
}
@media (max-width:380px){
  .when__cell--social{padding:.55rem .7rem;gap:.5rem}
  .when__cell--social .mini{font-size:1.05rem}
  .when .when__k{letter-spacing:.06em}
}

/* ── closing run (Oct 29): the invitation painting fades into the whisper; whisper and footer share one calm ink ground, no extra paint ── */
.invite::before{
  background:
    linear-gradient(90deg,rgba(10,7,7,.08) 0%,rgba(10,7,7,.5) 18%,rgba(10,7,7,.9) 32%,rgba(10,7,7,.93) 50%,rgba(10,7,7,.9) 68%,rgba(10,7,7,.5) 82%,rgba(10,7,7,.08) 100%),
    linear-gradient(to bottom,rgba(10,7,7,.85) 0%,transparent 14%,transparent 58%,rgba(10,7,7,.7) 80%,var(--ink-paint) 100%);
}
.whisper{background:var(--ink-paint);border-top:0}
.whisper::before{background:radial-gradient(38% 70% at 50% 50%,rgba(198,161,91,.07),transparent 100%)}
.foot{background:var(--ink-paint);border-top:0}
.foot::before,.foot::after{content:none}
@media (max-width:860px){
  .invite::before{background:
    linear-gradient(to bottom,rgba(10,7,7,.05) 0%,rgba(10,7,7,.5) 7%,rgba(10,7,7,.86) 15%,rgba(10,7,7,.9) 50%,rgba(10,7,7,.9) 78%,var(--ink-paint) 100%)}
  .whisper{background-image:none}
  .foot{background-image:none}
}

/* ── Oct 29: the multicolor rules were too bright for the mood. Same lines, now a dim gold hairline that fades out at the ends. ── */
:root{--paint-rule:linear-gradient(90deg,transparent 0%,rgba(198,161,91,.35) 22%,rgba(198,161,91,.42) 50%,rgba(198,161,91,.35) 78%,transparent 100%)}
.invite::after{height:1px;opacity:1}

/* ── Oct 29: the original painted (multicolor) rule returns, only above and below "If you know, you know" ── */
.whisper{--rule-paint:linear-gradient(90deg,transparent 0%,var(--oxblood) 14%,var(--amber) 32%,var(--leaf) 50%,var(--emerald) 68%,var(--sapphire) 84%,transparent 100%)}
.whisper::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:var(--rule-paint) top/100% 2px no-repeat,var(--rule-paint) bottom/100% 2px no-repeat;opacity:.9}

/* ── contact button + dialog ── */
.foot__line--btn{margin-top:1.4rem}
.foot__line--btn .btn{padding:.85rem 1.5rem;font-size:.72rem}
.contact{border:1px solid rgba(198,161,91,.28);padding:0;background:#0d0a09;color:var(--paper);
  width:min(30rem,calc(100% - 2rem));max-height:calc(100% - 2rem);overflow:auto}
.contact::backdrop{background:rgba(5,4,3,.78);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.contact__form{position:relative;padding:2.2rem 1.8rem 1.8rem;display:flex;flex-direction:column;text-align:left}
.contact .eyebrow{margin:0;color:var(--leaf)}
.contact__h{margin:.5rem 0 0;font-family:var(--d);font-weight:300;font-size:1.9rem;line-height:1.15}
.contact__sub{margin:.5rem 0 1.2rem;color:var(--paper-dim);font-size:.92rem}
.contact__l{margin:.9rem 0 .35rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--leaf)}
.contact__i{width:100%;padding:.85rem 1rem;background:rgba(10,7,7,.6);color:var(--paper);border:1px solid rgba(198,161,91,.26);border-radius:0;font:inherit;font-size:.95rem}
.contact__i:focus{outline:0;border-color:var(--gold)}
.contact__i[aria-invalid="true"]{border-color:#B4574F}
.contact__ta{resize:vertical;min-height:7.5rem}
.contact__send{margin-top:1.5rem;align-self:flex-start}
.contact__note{margin:1rem 0 0;font-size:.82rem;color:var(--paper-dim);min-height:1.2em}
.contact__note.is-bad{color:#D08A82}.contact__note.is-good{color:var(--leaf)}
.contact__x{position:absolute;top:.6rem;right:.7rem;width:2.5rem;height:2.5rem;border:0;background:transparent;color:var(--paper-dim);font-size:1.6rem;cursor:pointer}
.contact__x:hover{color:var(--paper)}

/* ── Oct 29 (later): "If you know, you know" lines match the other dim gold lines; social countdown removed, so the dates bar is two cells ── */
.whisper{--rule-paint:var(--paint-rule)}
.whisper::after{background:var(--rule-paint) top/100% 1px no-repeat,var(--rule-paint) bottom/100% 1px no-repeat;opacity:1}
.when{grid-template-columns:1fr 1fr}
.when__cell + .when__cell{border-left:1px solid var(--rule)}