/* ---------------------------------------------------------------
   Honey & Htut — 23 October 2026
   Ported from the Claude Design source. The global block below is
   carried over verbatim; everything under "Port additions" replaces
   behaviour the dc-runtime used to provide (hover props, screen
   switching, form states).
   --------------------------------------------------------------- */

html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: #640606; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
* { box-sizing: border-box; }
a { color: #FFF6E2; text-decoration: none; }
a:hover { color: #E8C9A0; }
input, textarea, select, button { font-family: inherit; }
::selection { background: #FFF6E2; color: #640606; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes slotOut {
  0% { transform: translateY(-580px); animation-timing-function: steps(26, end); }
  100% { transform: translateY(0); }
}
@keyframes drift { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(6deg); } }
@keyframes sheen { 0% { opacity: 0.15; } 50% { opacity: 0.5; } 100% { opacity: 0.15; } }

[data-photo="bw"] .ph { filter: grayscale(1) contrast(1.07) brightness(1.02); }
[data-photo="sepia"] .ph { filter: sepia(0.75) contrast(1.05) saturate(0.85); }
[data-photo="colour"] .ph { filter: none; }

.lnk:hover { opacity: 1 !important; }
.navlink:hover { color: #E8C9A0 !important; }
.stage, .hero { transform-origin: top center; }

@media (max-width: 980px) { .stage { transform: scale(0.72); margin-bottom: -348px; } .hero { transform: scale(0.78); margin-bottom: -134px; } }
@media (max-width: 700px)  { .stage { transform: scale(0.5);  margin-bottom: -622px; } .hero { transform: scale(0.56); margin-bottom: -266px; } }
@media (max-width: 860px)  { .cols2 { grid-template-columns: 1fr !important; } .cols3 { grid-template-columns: 1fr !important; } .bigtitle { font-size: 54px !important; } }

/* ---------------------------- Port additions ---------------------------- */

/* The <img> width/height attributes carry each file's intrinsic size so the
   browser can reserve the right box before the bytes arrive. But those
   attributes are *presentational hints* mapped onto the CSS width/height
   properties, and the design sets only `width` in its inline styles. The
   inline width beats the width hint; nothing beat the height hint, so every
   width-only image rendered at its full pixel height — news-invited.png came
   out 176x310 instead of 176x176, which stretched the whole collage.
   A stylesheet rule outranks a presentational hint and still loses to the
   inline heights the design does set, so this fixes the stretch without
   touching any image that is deliberately sized. Covered by
   test/image-sizing.test.js — do not remove while the attributes remain. */
img { height: auto; }

/* Screen switching. The router sets [hidden] on the inactive ones; several
   screens carry their own display value inline, so this has to win. */
[hidden] { display: none !important; }

/* One-pager: the design scrolls each section to 24px above the viewport top
   (`rect.top + pageYOffset - 24`). scroll-margin-top reproduces that for
   native anchor navigation, so the section links need no JS. */
[id^="sec-"] { scroll-margin-top: 24px; }

/* Divider between one-pager sections: hairline, pearl, hairline. */
.sec-divider { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.sec-divider > div { display: flex; align-items: center; gap: 16px; opacity: 0.5; }
.sec-divider .rule { flex: 1; height: 1px; background: rgba(255, 246, 226, 0.32); }

/* Anchors doing the job of the old nav <button>s. */
.navlink,
.btn-open,
.btn-ghost,
.btn-solid,
.plain-link { cursor: pointer; }

.btn-open { transition: background 240ms ease, color 240ms ease; }
.btn-open:hover { background: #FFF6E2; color: #640606; }

.btn-ghost:hover { background: #6D0101; color: #EDECEA; }
.btn-solid:hover { background: #E8C9A0; color: #640606; }

/* The RSVP tray + polaroid + envelope on the invitation collage are links
   wrapping artwork; keep them from picking up the global anchor colour. */
.plain-link { display: block; color: inherit; }
.plain-link:hover { color: inherit; }

/* Visible keyboard focus — the original relied on default button outlines. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #E8C9A0;
  outline-offset: 3px;
}

/* RSVP form states */
#rsvp-submit[disabled] { opacity: 0.55; cursor: progress; }

#rsvp-error {
  display: none;
  background: #F6E0DE;
  border: 1px solid #B4544F;
  color: #6D0101;
  padding: 13px 16px;
  font-family: 'EB Garamond', serif;
  font-size: 17px;
  line-height: 1.55;
}
#rsvp-error.is-visible { display: block; }

/* Honour reduced-motion: the slot-drop and fade-ups are decorative. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}