/* =========================================================================
   PIÑA — Filipiniana wedding
   Signature idea: Filipino craft as structure. It opens through capiz-shell
   window shutters, the page wears piña embroidery, sampaguita garlands divide
   the sections, and a "rites" section explains candle, veil, cord and arras.
   Type: Marcellus (inscriptional caps) · Mrs Saint Delafield (script) · Lora (text)
   ========================================================================= */
@font-face { font-family: "Marcellus"; src: url("../fonts/pina/marcellus-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Mrs Saint Delafield"; src: url("../fonts/pina/delafield-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/pina/lora-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/pina/lora-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --bg: #f3ebda; --paper: #fbf6ea; --ink: #3a2a1e; --muted: #7a6650; --line: rgba(91, 58, 34, .18);
  --accent: #8a6a33; --accent-ink: #fbf6ea; --narra: #5b3a22; --narra-dark: #3b2615; --leaf: #4f6b4a; --gold: #b38f52;
  --display: "Marcellus", "Trajan Pro", Georgia, serif; --script: "Mrs Saint Delafield", cursive; --text: "Lora", Georgia, serif;
  --maxw: 600px; --radius: 4px;
  /* piña callado lattice: fine diamond net with tiny florets */
  --pina: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%23b38f52' stroke-width='.6' opacity='.35'%3E%3Cpath d='M0 14L14 0L28 14L14 28Z'/%3E%3Ccircle cx='14' cy='14' r='2.2'/%3E%3Ccircle cx='0' cy='0' r='1.2'/%3E%3Ccircle cx='28' cy='28' r='1.2'/%3E%3Ccircle cx='28' cy='0' r='1.2'/%3E%3Ccircle cx='0' cy='28' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
  --capiz: radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.85), rgba(255,255,255,0) 55%),
           conic-gradient(from 210deg at 60% 60%, #f2ece1, #e6edef, #f1e5e0, #ecefe3, #f5ecdf, #f2ece1),
           repeating-linear-gradient(115deg, rgba(255,255,255,.18) 0 2px, rgba(0,0,0,.015) 2px 5px);
}
body { background: var(--pina), var(--bg); background-color: var(--bg); }

/* ---------- Intro: capiz shutters ---------- */
.pn-intro { --intro-ms: 1800; background: radial-gradient(80% 60% at 50% 45%, color-mix(in srgb, var(--bg) 35%, #fff), var(--bg) 70%, color-mix(in srgb, var(--bg) 85%, #000)); background-color: var(--bg); gap: 0; transition: opacity .7s ease 1.15s, visibility 0s linear 1.85s; }
.pn-intro { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.pn-window { position: relative; width: min(300px, 78vw); aspect-ratio: 3 / 4; perspective: 1200px; border: 12px solid var(--narra); border-radius: 6px 6px 3px 3px;
  box-shadow: inset 0 0 0 2px var(--narra-dark), 0 0 0 2px color-mix(in srgb, var(--narra) 80%, #fff), 0 30px 50px -26px rgba(59, 38, 21, .7);
  background: radial-gradient(80% 70% at 50% 50%, #fff9ec, #f4e5c6); }
.pn-glow { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 16px; }
.pn-glow-names { font-family: var(--script); font-size: 2.6rem; line-height: 1; color: var(--narra); }
.pn-glow-date { font-family: var(--display); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.pn-shutter { position: absolute; top: 0; bottom: 0; width: 50%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 5px; padding: 5px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--narra) 85%, #fff), var(--narra) 40%, color-mix(in srgb, var(--narra) 85%, #fff)); transition: transform 1.1s cubic-bezier(.55,.05,.25,1) .15s; backface-visibility: hidden; box-shadow: inset 0 0 0 1px var(--narra-dark); }
.pn-l { left: 0; transform-origin: left center; }
.pn-r { right: 0; transform-origin: right center; }
.pn-shutter span { background: var(--capiz); background-color: #f1ebe0; box-shadow: inset 0 0 6px rgba(120, 90, 50, .25), inset 0 0 0 1px rgba(255,255,255,.4); border-radius: 1px; }
.pn-latch { position: absolute; z-index: 3; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; border: 0; cursor: pointer; padding: 10px;
  background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--gold) 75%, #fff), var(--gold) 50%, color-mix(in srgb, var(--gold) 70%, #000)); box-shadow: 0 0 0 3px var(--narra-dark), 0 6px 14px rgba(0,0,0,.35); animation: seal-breathe 2.8s ease-in-out infinite; transition: opacity .4s, transform .4s; }
.pn-latch svg { width: 100%; height: 100%; display: block; }
.pn-latch .pf-p { fill: #fffdf4; } .pn-latch .pf-c { fill: #e7cf8a; }
.is-opening .pn-l { transform: rotateY(-112deg); }
.is-opening .pn-r { transform: rotateY(112deg); }
.is-opening .pn-latch { opacity: 0; transform: scale(.4); animation: none; }
.pn-intro .intro-hint { font-family: var(--display); letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; color: var(--narra); }

/* ---------- Garland & headings ---------- */
.pina-garland { display: block; width: 180px; height: auto; margin: 0 auto; }
.pg-s { fill: none; stroke: var(--leaf); stroke-width: .8; opacity: .7; }
.pf-p { fill: #fffdf6; stroke: rgba(91,58,34,.35); stroke-width: .5; }
.pf-c { fill: #e2c27a; }
.t-pina .sh-k { font-family: var(--script); font-size: 1.9rem; letter-spacing: 0; text-transform: none; color: var(--accent); margin-bottom: 0; line-height: 1.1; }
.t-pina .sh-t { font-size: clamp(1.7rem, 7vw, 2.3rem); letter-spacing: .08em; text-transform: uppercase; color: var(--narra); }
.t-pina .sh-t::after { content: ""; display: block; width: 120px; height: 16px; margin: 14px auto 0;
  background: radial-gradient(circle, #fffdf6 2.5px, var(--gold) 3px, transparent 3.6px) center / 16px 16px no-repeat,
              linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat; }

/* alternating bands: embroidered panel / plain */
.t-pina .s:nth-of-type(even):not(.s-hero) { background: linear-gradient(rgba(251,246,234,.82), rgba(251,246,234,.82)), var(--pina); }

/* ---------- Hero: embroidered piña panel ---------- */
.t-pina .s-hero { padding: 28px 16px; background: radial-gradient(90% 70% at 50% 35%, var(--paper), var(--bg)); }
.pn-hero-panel { position: relative; width: 100%; max-width: 520px; padding: 54px 22px 46px; text-align: center; color: var(--ink);
  background: linear-gradient(rgba(251,246,234,.7), rgba(251,246,234,.7)), var(--pina); border: 1px solid rgba(179,143,82,.45);
  box-shadow: inset 0 0 0 6px rgba(251,246,234,.9), inset 0 0 0 7px rgba(179,143,82,.35), 0 24px 40px -30px rgba(59,38,21,.6); }
.pn-hero-panel::before, .pn-hero-panel::after { content: "❀"; position: absolute; top: 14px; color: var(--gold); font-size: .9rem; opacity: .7; }
.pn-hero-panel::before { left: 16px; } .pn-hero-panel::after { right: 16px; }
.t-pina .hero-guest { font-style: italic; color: var(--muted); }
.pn-blessing { font-family: var(--display); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.6; color: var(--narra); margin: 0 auto 4px; max-width: 24em; }
.pn-blessing-en { font-style: italic; font-size: .88rem; color: var(--muted); margin-bottom: 22px; }
.t-pina .hero-t { display: flex; flex-direction: column; align-items: center; font-family: var(--display); font-size: clamp(2.6rem, 13vw, 4.4rem); letter-spacing: .06em; text-transform: uppercase; color: var(--narra); line-height: 1; }
.t-pina .hero-t .amp { font-family: var(--script); font-style: normal; text-transform: none; font-size: .95em; color: var(--accent); line-height: .9; margin: 2px 0 -4px; letter-spacing: 0; }
.t-pina .pina-garland { margin: 16px auto 18px; width: 200px; }
.t-pina .hero-line { font-style: italic; font-size: 1.08rem; margin-bottom: 18px; }
.t-pina .hero-date { font-family: var(--display); font-size: 1.15rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.t-pina .hero-time { font-size: .92rem; color: var(--muted); }
.t-pina .hero-cta { background: var(--narra); color: var(--paper); border-radius: 2px; font-family: var(--display); letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; }

/* ---------- Countdown ---------- */
.t-pina .cd-u { padding: 12px 0; background: var(--paper); border: 1px solid var(--line); }
.t-pina .cd-u b { font-family: var(--display); color: var(--narra); }
.t-pina .btn-line { border-radius: 2px; font-family: var(--display); letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; color: var(--narra); }

/* ---------- Rites ---------- */
.rites-intro { text-align: center; font-style: italic; color: var(--muted); }
.rites { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.rite { background: var(--paper); border: 1px solid var(--line); padding: 22px 14px 18px; text-align: center; position: relative; }
.rite::before { content: ""; position: absolute; inset: 5px; border: 1px dashed rgba(179,143,82,.35); pointer-events: none; }
.rite-ic { width: 46px; height: 46px; fill: none; stroke: var(--narra); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin: 0 auto 8px; display: block; }
.rite-n { font-family: var(--display); letter-spacing: .14em; text-transform: uppercase; font-size: 1rem; color: var(--narra); margin-bottom: 6px; }
.rite-t { font-size: .88rem; line-height: 1.5; color: var(--muted); margin: 0; }

/* ---------- Sponsors ---------- */
.t-pina .pp { grid-template-columns: 1fr 1fr; gap: 26px 14px; }
.t-pina .pp-g:first-child { grid-column: 1 / -1; }
.t-pina .pp-h { font-family: var(--display); letter-spacing: .14em; text-transform: uppercase; font-size: .86rem; color: var(--accent); }
.t-pina .pp-l li { font-size: .98rem; }

/* ---------- Schedule ---------- */
.t-pina .tl { position: relative; padding-left: 4px; }
.t-pina .tl-i { grid-template-columns: 82px 1fr; border-bottom: 1px dashed var(--line); }
.t-pina .tl-time { font-family: var(--display); letter-spacing: .06em; color: var(--accent); }
.t-pina .tl-title { font-weight: 400; font-family: var(--display); letter-spacing: .06em; text-transform: uppercase; font-size: .96rem; }
.t-pina .tl-text { font-style: italic; }

/* ---------- Venues ---------- */
.t-pina .vn-c { border-color: rgba(179,143,82,.45); box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6px var(--line); }
.t-pina .vn-l { font-family: var(--display); color: var(--accent); }
.t-pina .vn-n { color: var(--narra); font-size: 1.5rem; letter-spacing: .03em; }

/* ---------- Capiz gallery ---------- */
.cap-hint { text-align: center; font-size: .82rem; font-style: italic; color: var(--muted); margin-top: -14px; }
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--narra) 85%, #fff), var(--narra) 50%, color-mix(in srgb, var(--narra) 85%, #fff)); border-radius: 4px; box-shadow: 0 20px 34px -24px rgba(59,38,21,.7); }
.cap { position: relative; display: block; aspect-ratio: 3 / 4; padding: 0; border: 0; overflow: hidden; cursor: pointer; background: #3b2615; }
.cap-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cap-photo.is-ph.ph-1 { background: linear-gradient(160deg, #d9b98c, #8a6a3f); }
.cap-photo.is-ph.ph-2 { background: linear-gradient(160deg, #a9b79c, #4f6b4a); }
.cap-photo.is-ph.ph-3 { background: linear-gradient(160deg, #e2c9b4, #9c6e57); }
.cap-pane { position: absolute; inset: 0; background: var(--capiz); background-color: #f1ebe0; opacity: .93; box-shadow: inset 0 0 10px rgba(120,90,50,.3); transition: transform .7s cubic-bezier(.5,0,.2,1); }
.cap.is-open .cap-pane { transform: translateX(-102%); }
.cap-cap { position: absolute; left: 4px; right: 4px; bottom: 8px; font-family: var(--display); font-size: .7rem; letter-spacing: .08em; line-height: 1.25; text-align: center; text-transform: uppercase; color: var(--narra); transition: color .4s; z-index: 1; }
.cap.is-open .cap-cap { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }

/* ---------- Attire, gifts, faq ---------- */
.t-pina .dr-text, .t-pina .gf-p { text-align: center; font-size: 1.04rem; }
.t-pina .sw-dot { border-radius: 2px; transform: rotate(45deg) scale(.8); }
.t-pina .faq summary { font-weight: 400; font-family: var(--display); letter-spacing: .04em; color: var(--narra); }

/* ---------- RSVP ---------- */
.t-pina .rs, .t-pina .rs-done { background: linear-gradient(rgba(251,246,234,.92), rgba(251,246,234,.92)), var(--pina); border-color: rgba(179,143,82,.45); box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px var(--line); padding: 28px 20px; }
.t-pina .f-l { font-family: var(--display); letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; color: var(--narra); }
.t-pina .f-in, .t-pina .ch span { background: #fffdf6; border-radius: 2px; }
.t-pina .rs-btn { border-radius: 2px; background: var(--narra); font-family: var(--display); letter-spacing: .2em; text-transform: uppercase; font-size: .82rem; }
.t-pina .rs-done-t { font-family: var(--script); font-size: 2.6rem; color: var(--accent); }

/* ---------- Closing ---------- */
.t-pina .cl-line { font-family: var(--script); font-size: 2.6rem; color: var(--accent); line-height: 1.1; }
.t-pina .cl-sign { font-family: var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--narra); }

@media (min-width: 720px) {
  .rites { grid-template-columns: repeat(4, 1fr); }
  .t-pina .pp { grid-template-columns: repeat(4, 1fr); }
}
.pn-sub { font-family: var(--display); letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; color: var(--accent); margin: 8px 0 0; }
.t-pina .hero-t span { overflow-wrap: anywhere; }

/* demo photo spots inside the capiz panes: the camera icon only (the pane caption is the label); the caption stays white-on-photo once open */
.cap .ph-slot .ph-l, .cap .ph-slot .ph-s { display: none; }
.cap .ph-slot { min-height: 0; padding: 0 0 22px; }

/* ---------- cover in a narra window ---------- */
.pn-win { position: relative; max-width: 440px; margin: 0 auto; padding: 16px; border-radius: 6px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--narra) 80%, #fff), var(--narra) 30%, var(--narra-dark, var(--narra)) 70%, color-mix(in srgb, var(--narra) 85%, #fff));
  box-shadow: 0 22px 34px -24px rgba(59,38,21,.8), inset 0 0 0 2px rgba(255,255,255,.15); }
.pn-win::before { content: ""; position: absolute; inset: 8px; border-radius: 3px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(241,235,224,.75) 0 14px, rgba(220,210,190,.75) 14px 16px), repeating-linear-gradient(0deg, transparent 0 14px, rgba(160,130,90,.35) 14px 16px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 8px; }
.pn-win-in { border-radius: 2px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); background: #3b2a1c; }
.cap-photo .cap-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cap:not(.is-open) .cap-img { pointer-events: none; }