/* The palette also lives on #yw-root (inline, from the original design). It is
   repeated here so overlays rendered outside that element — the lightbox — can
   reach the same variables. Values are identical; nothing is overridden. */
:root{
  --terra:#A2493A;--terra-deep:#7E3528;--gold:#C49A48;--gold2:#D8AE59;
  --cream:#F4E9D6;--card:#FBF5EA;--ink:#48301F;--ink2:#876A52;
  --line:rgba(72,48,31,0.16);--floral:#C2694B;
  --serif:'Cormorant Garamond', Georgia, serif;--sans:'Jost', system-ui, sans-serif;
}

*{box-sizing:border-box}
body{margin:0;padding:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:#1c0f0c}
::selection{background:rgba(196,154,72,.3)}
input,textarea,select,button{font-family:inherit}
textarea{resize:none}
.yw-slot{--is-bg:rgba(0,0,0,.04)}
@keyframes ywSway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes ywFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes ywBob{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(7px);opacity:1}}
@keyframes ywFall{0%{transform:translateY(-14vh) translateX(0) rotate(0);opacity:0}12%{opacity:.85}100%{transform:translateY(116vh) translateX(34px) rotate(440deg);opacity:0}}
@keyframes ywSpin{to{transform:rotate(360deg)}}
@keyframes ywRing{0%{box-shadow:0 12px 28px rgba(0,0,0,.35),0 0 0 0 rgba(216,174,89,.55)}70%{box-shadow:0 12px 28px rgba(0,0,0,.35),0 0 0 18px rgba(216,174,89,0)}100%{box-shadow:0 12px 28px rgba(0,0,0,.35),0 0 0 0 rgba(216,174,89,0)}}
@keyframes ywGrow{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes ywShimmer{0%{background-position:-120% center}100%{background-position:220% center}}
@keyframes ywRise{0%{opacity:0;transform:translateY(42px) scale(.8)}60%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ywGlow{0%,100%{filter:drop-shadow(0 8px 18px rgba(0,0,0,.32)) drop-shadow(0 0 9px color-mix(in srgb,var(--gold2) 22%,transparent))}50%{filter:drop-shadow(0 10px 24px rgba(0,0,0,.36)) drop-shadow(0 0 26px color-mix(in srgb,var(--gold2) 68%,transparent))}}
@keyframes ywBurst{0%{transform:scale(.25);opacity:0}28%{opacity:.95}100%{transform:scale(2.7);opacity:0}}
@keyframes ywTwinkle{0%,100%{opacity:.1;transform:scale(.7) rotate(-6deg)}50%{opacity:.4;transform:scale(1.05) rotate(6deg)}}

/* --------------------------------------------------------------------------
   Interaction styles the original design expressed as `style-hover` /
   `style-focus` attributes directly on the element.
   -------------------------------------------------------------------------- */
.yw-card-hover:hover{transform:translateY(-5px);box-shadow:0 22px 48px color-mix(in srgb,var(--ink) 14%,transparent)}
.yw-field:focus{border-color:var(--gold)}

/* --------------------------------------------------------------------------
   Photo slots. Drop a file into public/img/ and it replaces the placeholder.
   Geometry, radius and empty-state treatment mirror the original <image-slot>.
   -------------------------------------------------------------------------- */
/* The outer box must NOT clip: `overflow:hidden` here would synthesise the
   baseline from its bottom margin edge and shrink the line box that the
   inline-block frame around it sits on. Clipping happens on .yw-slot-frame,
   exactly as the original component did it. */
.yw-slot{position:relative;display:block;vertical-align:top;box-sizing:border-box;
  font:13px/1.3 system-ui,-apple-system,sans-serif;color:rgba(0,0,0,.55)}
.yw-slot-frame{position:absolute;inset:0;overflow:hidden;background:var(--is-bg,rgba(0,0,0,.04))}
.yw-slot-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.yw-slot-ring{position:absolute;inset:0;pointer-events:none;border:1.5px dashed rgba(0,0,0,.25)}
.yw-slot-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;text-align:center;padding:12px;box-sizing:border-box;user-select:none}
.yw-slot-empty svg{opacity:.45}
.yw-slot-cap{max-width:90%;font-weight:500;letter-spacing:.01em}

/* --------------------------------------------------------------------------
   Respect a reduced-motion preference.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* --------------------------------------------------------------------------
   A filled slot is a button that opens the preview. It is the absolutely
   positioned frame, so turning it into a button cannot affect page geometry.
   -------------------------------------------------------------------------- */
button.yw-slot-frame{-webkit-appearance:none;appearance:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;display:block;width:100%;height:100%;cursor:zoom-in;
  -webkit-tap-highlight-color:transparent}
.yw-photo img{transition:transform .5s cubic-bezier(.16,.7,.2,1)}
@media (hover:hover){.yw-photo:hover img{transform:scale(1.06)}}
.yw-photo:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}

/* --------------------------------------------------------------------------
   Photo preview (lightbox)
   -------------------------------------------------------------------------- */
.yw-lb[hidden]{display:none}
.yw-lb{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .28s ease;
  padding:calc(20px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right))
          calc(20px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left))}
.yw-lb.is-open{opacity:1}
.yw-lb-backdrop{position:absolute;inset:0;background:rgba(28,15,12,.94);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

.yw-lb-figure{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;
  gap:14px;max-width:min(920px,100%);max-height:100%}
.yw-lb-img{display:block;max-width:100%;max-height:calc(100dvh - 150px);width:auto;height:auto;
  object-fit:contain;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.55);
  background:rgba(255,255,255,.04);
  transform:scale(.94);opacity:0;transition:transform .34s cubic-bezier(.16,.7,.2,1),opacity .34s ease}
.yw-lb.is-open .yw-lb-img{transform:scale(1);opacity:1}
.yw-lb-img.is-swiping{transition:none}
@supports not (height:100dvh){.yw-lb-img{max-height:calc(100vh - 150px)}}

.yw-lb-caption{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-style:italic;
  font-size:15px;color:#F6EBD4;opacity:.8;text-align:center;letter-spacing:.01em}

.yw-lb-btn{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;cursor:pointer;color:#F6EBD4;
  border:1px solid rgba(216,174,89,.45);background:rgba(126,53,40,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  -webkit-tap-highlight-color:transparent;transition:background .2s ease,transform .2s ease}
@media (hover:hover){.yw-lb-btn:hover{background:rgba(162,73,58,.8);transform:scale(1.06)}}
.yw-lb-btn:active{transform:scale(.94)}
.yw-lb-btn:focus-visible{outline:2px solid var(--gold2,#D8AE59);outline-offset:2px}
.yw-lb-btn[hidden]{display:none}

.yw-lb-close{top:calc(14px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right))}
.yw-lb-prev{left:calc(12px + env(safe-area-inset-left));top:50%;margin-top:-22px}
.yw-lb-next{right:calc(12px + env(safe-area-inset-right));top:50%;margin-top:-22px}

.yw-lb-counter{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;
  transform:translateX(-50%);font-family:var(--sans,'Jost',system-ui,sans-serif);font-size:11px;
  letter-spacing:.18em;color:rgba(246,235,212,.6)}

/* On a phone the arrows would sit on top of the photo; move them to the
   bottom corners where thumbs actually reach. */
@media (max-width:560px){
  .yw-lb-prev{left:calc(16px + env(safe-area-inset-left));top:auto;margin-top:0;
    bottom:calc(46px + env(safe-area-inset-bottom))}
  .yw-lb-next{right:calc(16px + env(safe-area-inset-right));top:auto;margin-top:0;
    bottom:calc(46px + env(safe-area-inset-bottom))}
  .yw-lb-img{max-height:calc(100dvh - 190px)}
  .yw-lb-counter{bottom:calc(60px + env(safe-area-inset-bottom))}
}

body.yw-lb-open{overflow:hidden}

/* --------------------------------------------------------------------------
   Touch devices: iOS Safari zooms the whole page when a focused field has a
   font-size under 16px, and never zooms back out. The design's 14.5px fields
   would trigger it, so lift them to 16px on coarse pointers only — desktop
   rendering is untouched.

   The design sets font-size inline on those fields, so !important is the only
   way a stylesheet can win.
   -------------------------------------------------------------------------- */
@media (pointer:coarse){
  .yw-field,#yw-r-count{font-size:16px !important}
}