/* =========================================================================
   PORCELAIN — blue-and-white chinoiserie (a named 2026 invitation trend)
   Signature idea: a porcelain plate. It opens by lifting away like a lid, and
   the couple's names sit inside a patterned plate rim; auspicious clouds and
   fretwork borders frame the page. Lovely for Filipino-Chinese families.
   Type: Cinzel (inscriptional) · EB Garamond (text)
   ========================================================================= */
@font-face { font-family: "Cinzel"; src: url("../fonts/porcelain/cinzel-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/porcelain/garamond-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/porcelain/garamond-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --bg: #f4f5f2; --paper: #ffffff; --ink: #1f2f5a; --muted: #5c6683; --line: rgba(31, 47, 90, .16);
  --accent: #2a4a9a; --accent-ink: #fff; --rim: #2a4a9a; --glaze: #ffffff;
  --display: "Cinzel", "Trajan Pro", Georgia, serif; --text: "EB Garamond", Georgia, serif;
  --radius: 4px; --maxw: 580px;
}
body { background: var(--bg); font-size: 1.12rem; }

/* fretwork border used above section titles */
.t-porcelain .sh::before { content: ""; display: block; width: 180px; height: 12px; margin: 0 auto 16px;
  background: linear-gradient(var(--rim), var(--rim)) 0 0 / 100% 2px no-repeat, linear-gradient(var(--rim), var(--rim)) 0 100% / 100% 2px no-repeat,
              repeating-linear-gradient(90deg, var(--rim) 0 2px, transparent 2px 12px) 0 2px / 100% 6px no-repeat,
              repeating-linear-gradient(90deg, transparent 0 6px, var(--rim) 6px 8px, transparent 8px 12px) 0 6px / 100% 4px no-repeat; }

/* ---------- Intro: the plate ---------- */
.pc-intro { --intro-ms: 1600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: radial-gradient(70% 50% at 50% 40%, var(--paper), var(--bg)); transition: opacity .6s ease 1s, visibility 0s linear 1.6s; }
.pc-plate { position: relative; width: min(270px, 70vw); aspect-ratio: 1; border: 0; padding: 0; border-radius: 50%; cursor: pointer; background: var(--glaze);
  box-shadow: 0 30px 50px -26px color-mix(in srgb, var(--ink) 70%, transparent), inset 0 -8px 20px rgba(0,0,0,.06); transition: transform 1s cubic-bezier(.6,0,.3,1), opacity .6s .5s; }
.pc-rim { position: absolute; inset: 4%; border-radius: 50%;
  background: repeating-conic-gradient(var(--rim) 0 6deg, transparent 6deg 9deg, color-mix(in srgb, var(--rim) 55%, transparent) 9deg 12deg, transparent 12deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 67% 86%, transparent 87%); mask: radial-gradient(circle, transparent 66%, #000 67% 86%, transparent 87%); }
.pc-ring { position: absolute; inset: 22%; border-radius: 50%; box-shadow: 0 0 0 2px var(--rim), 0 0 0 7px var(--glaze), 0 0 0 8px var(--rim); }
.pc-mark { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 3.4rem; color: var(--rim); }
.pc-names { font-family: var(--display); letter-spacing: .14em; color: var(--ink); margin: 0; text-align: center; padding: 0 20px; }
.pc-intro .intro-hint { font-style: italic; color: var(--muted); }
.is-opening .pc-plate { transform: translateY(-70vh) rotate(200deg) scale(.7); opacity: 0; }
.is-opening .pc-names, .is-opening .pc-intro .intro-hint { opacity: 0; transition: opacity .3s; }

/* ---------- Headings ---------- */
.t-porcelain .sh-k { font-family: var(--display); color: var(--accent); letter-spacing: .2em; }
.t-porcelain .sh-t { font-family: var(--display); color: var(--ink); font-size: clamp(1.6rem, 7vw, 2.3rem); letter-spacing: .06em; }

/* ---------- Hero: names inside a plate ---------- */
.t-porcelain .s-hero { position: relative; overflow: hidden; padding: 40px 14px 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pc-dish { position: relative; width: min(470px, 94vw); aspect-ratio: 1; border-radius: 50%; background: var(--glaze); box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--ink) 70%, transparent); display: grid; place-items: center; }
.pc-dish::before { content: ""; position: absolute; inset: 2.5%; border-radius: 50%;
  background: repeating-conic-gradient(var(--rim) 0 5deg, transparent 5deg 8deg, color-mix(in srgb, var(--rim) 50%, transparent) 8deg 10deg, transparent 10deg 12deg);
  -webkit-mask: radial-gradient(circle, transparent 82%, #000 83% 93%, transparent 94%); mask: radial-gradient(circle, transparent 82%, #000 83% 93%, transparent 94%); }
.pc-dish::after { content: ""; position: absolute; inset: 13%; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--rim), 0 0 0 5px var(--glaze), 0 0 0 6px var(--rim); }
.pc-dish-in { position: relative; z-index: 1; width: 66%; text-align: center; }
.t-porcelain .hero-guest { font-style: italic; color: var(--muted); font-size: 1rem; margin-bottom: 2px; }
.pc-hero-mark { font-family: var(--display); font-size: 2rem; color: var(--rim); line-height: 1; margin: 0 0 4px; }
.t-porcelain .hero-k { font-family: var(--display); font-size: .7rem; letter-spacing: .2em; color: var(--muted); margin-bottom: 6px; }
.t-porcelain .hero-t { display: flex; flex-direction: column; align-items: center; font-family: var(--display); font-size: clamp(1.6rem, 8vw, 2.8rem); letter-spacing: .06em; color: var(--ink); line-height: 1.05; }
.t-porcelain .hero-t .amp { font-family: var(--text); font-style: italic; font-size: .7em; color: var(--accent); }
.t-porcelain .hero-line { font-style: italic; font-size: .92rem; color: var(--muted); margin: 8px 0; line-height: 1.35; }
.t-porcelain .hero-date { font-family: var(--display); font-size: .78rem; letter-spacing: .12em; margin-bottom: 0; }
.t-porcelain .hero-place { font-size: .88rem; color: var(--muted); margin: 0; }
.t-porcelain .hero-cta { margin-top: 22px; border-radius: 2px; background: var(--rim); font-family: var(--display); letter-spacing: .2em; font-size: .8rem; }
.pc-cloud { position: absolute; width: 110px; fill: none; stroke: var(--rim); stroke-width: 2; opacity: .5; pointer-events: none; }
.pc-cloud.k1 { top: 16px; left: -20px; } .pc-cloud.k2 { bottom: 30px; right: -24px; transform: scaleX(-1); }

/* ---------- Sections ---------- */
.t-porcelain .s:nth-of-type(even):not(.s-hero) { background: var(--paper); }
.t-porcelain .cd-u { border: 2px solid var(--rim); border-radius: 50%; aspect-ratio: 1; display: grid; place-content: center; background: var(--paper); }
.t-porcelain .cd-u b { font-family: var(--display); color: var(--ink); font-size: clamp(1.4rem, 7vw, 2.2rem); }
.t-porcelain .cd-u span { font-size: .66rem; }
.t-porcelain .btn-line { border-radius: 2px; border-color: var(--rim); color: var(--rim); font-family: var(--display); font-size: .72rem; letter-spacing: .14em; }
.t-porcelain .btn-line:hover { background: var(--rim); color: var(--paper); border-color: var(--rim); }
.t-porcelain .story-body p { text-align: center; font-size: 1.15rem; }
.t-porcelain .miles li { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.t-porcelain .mi-y { font-family: var(--display); color: var(--accent); }
.t-porcelain .tl-time { font-family: var(--display); color: var(--accent); font-size: .82rem; }
.t-porcelain .tl-title { font-weight: 400; font-size: 1.15rem; }
.t-porcelain .vn-c { border: 2px solid var(--rim); border-radius: 2px; box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--rim); }
.t-porcelain .vn-l, .t-porcelain .pp-h { font-family: var(--display); color: var(--accent); }
.t-porcelain .vn-n { font-family: var(--display); font-size: 1.3rem; letter-spacing: .04em; }
.t-porcelain .pp-l li { font-size: 1.1rem; }
.t-porcelain .sw-dot { border-radius: 50%; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--rim); }
.t-porcelain .faq summary { font-weight: 400; font-size: 1.15rem; }
.t-porcelain .rs, .t-porcelain .rs-done { border: 2px solid var(--rim); border-radius: 2px; box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6px var(--rim); padding: 28px 22px; }
.t-porcelain .f-l { font-family: var(--display); font-size: .7rem; letter-spacing: .12em; color: var(--accent); }
.t-porcelain .f-in, .t-porcelain .ch span { border-radius: 2px; }
.t-porcelain .rs-btn { border-radius: 2px; background: var(--rim); font-family: var(--display); letter-spacing: .18em; font-size: .86rem; }
.t-porcelain .rs-done-t { font-family: var(--display); color: var(--ink); font-size: 1.6rem; }
.t-porcelain .cl-line { font-style: italic; color: var(--ink); }
.t-porcelain .cl-sign { font-family: var(--display); letter-spacing: .14em; color: var(--accent); }

/* ---------- plate cover & plate-wall gallery ---------- */
.pq-dinner { margin: 0 auto; width: min(86vw, 380px); aspect-ratio: 1; border-radius: 50%; padding: 7%; background: var(--glaze);
  box-shadow: inset 0 0 0 6px var(--rim), inset 0 0 0 9px var(--glaze), inset 0 0 0 10px var(--rim), inset 0 0 0 30px var(--glaze), inset 0 0 0 31px color-mix(in srgb, var(--rim) 40%, transparent), 0 18px 30px -18px rgba(31,47,90,.5), 0 2px 0 rgba(31,47,90,.08);
  background-image: radial-gradient(circle, transparent 60%, rgba(42,74,154,.08) 61%, transparent 62%), radial-gradient(circle at 35% 30%, #fff, #eef1f7); }
.pq-pimg { width: 100%; height: 100%; border-radius: 50%; background: color-mix(in srgb, var(--rim) 10%, var(--paper)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rim) 50%, transparent); }
.pq-pimg .mf-media { border-radius: 50%; }
.pq-wall { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 10px; }
.pq-dish { margin: 0; display: grid; justify-items: center; gap: 6px; }
.pq-dimg { border-radius: 50%; aspect-ratio: 1; padding: 0; background: color-mix(in srgb, var(--rim) 10%, var(--paper)); box-shadow: 0 0 0 5px var(--glaze), 0 0 0 7px var(--rim), 0 10px 18px -12px rgba(31,47,90,.55); }
.pq-dimg img { border-radius: 50%; }
.pq-dish.s0 .pq-dimg { width: min(40vw, 170px); } .pq-dish.s1 .pq-dimg { width: min(30vw, 128px); } .pq-dish.s2 .pq-dimg { width: min(34vw, 146px); }
.pq-dish figcaption { font: .78rem var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); text-align: center; max-width: 12em; }