/* Optional large-text mode for guests who prefer a more legible invitation. */
html.readable-mode {
  --ink:#252a25;
  --muted:#5f655c;
  --line:#c9c8bf;
}

html.readable-mode body {
  font-size:16px;
}

html.readable-mode .readable-toggle {
  position:fixed;
  z-index:25;
  top:max(12px,env(safe-area-inset-top));
  left:max(12px,calc((100vw - 480px) / 2 + 14px));
  min-height:44px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:24px;
  background:rgba(52,55,48,.76);
  color:#fff;
  box-shadow:0 5px 18px rgba(45,48,42,.16);
  backdrop-filter:blur(8px);
  font-size:11px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
}

html:not(.readable-mode) .readable-toggle {
  position:fixed;
  z-index:25;
  top:max(12px,env(safe-area-inset-top));
  left:max(12px,calc((100vw - 480px) / 2 + 14px));
  min-height:44px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:24px;
  background:rgba(52,55,48,.64);
  color:#fff;
  box-shadow:0 5px 18px rgba(45,48,42,.13);
  backdrop-filter:blur(8px);
  font-size:11px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
}

.readable-toggle[aria-pressed="true"] {
  background:var(--cream,#faf8f2);
  color:var(--sage-dark,#64705f);
  border-color:var(--line,#dcd9cf);
}

.readable-toggle--directions,
html:not(.readable-mode) .readable-toggle--directions,
html.readable-mode .readable-toggle--directions {
  left:max(12px,calc((100vw - 520px) / 2 + 14px));
}

html.readable-mode .hero {
  padding-top:84px;
}
html.readable-mode .hero h1 {font-size:clamp(33px,9vw,42px)}
html.readable-mode .eyebrow,
html.readable-mode .section-kicker {font-size:11px}
html.readable-mode .hero__date {font-size:12px}
html.readable-mode .hero__venue {font-size:18px}
html.readable-mode .hero__venue span {font-size:10px}
html.readable-mode .section {padding-top:100px;padding-bottom:100px}
html.readable-mode .section h2 {font-size:28px;line-height:1.5}
html.readable-mode .section-note {font-size:15px;line-height:1.95}
html.readable-mode .intro__copy {font-size:17px;line-height:2.15}
html.readable-mode .family p {font-size:15px;line-height:1.8}
html.readable-mode .family strong {font-size:18px}
html.readable-mode .day__time {font-size:16px}
html.readable-mode .calendar {padding:28px 20px}
html.readable-mode .calendar__head strong {font-size:14px}
html.readable-mode .calendar__week {font-size:12px}
html.readable-mode .calendar__days span {font-size:14px}
html.readable-mode .calendar__days .wedding:after {font-size:6px}
html.readable-mode .countdown {font-size:16px}
html.readable-mode .countdown strong {font-size:20px}
html.readable-mode .gallery__grid {margin-top:40px}
html.readable-mode .location__venue {font-size:21px}
html.readable-mode .address-copy {font-size:15px;line-height:1.85}
html.readable-mode .address-copy span {font-size:11px;padding:6px 9px}
html.readable-mode .lot-address {font-size:13px}
html.readable-mode .map-links a {font-size:14px;min-height:50px;display:grid;place-items:center}
html.readable-mode .route-map__note {font-size:12px;line-height:1.8}
html.readable-mode .directions-detail {font-size:13px;min-height:44px;align-items:center}
html.readable-mode .tabs button {font-size:14px;min-height:50px}
html.readable-mode .tab-panel {font-size:14px;line-height:2;min-height:110px}
html.readable-mode .accordion__trigger {font-size:17px;min-height:60px}
html.readable-mode .account {padding-top:18px;padding-bottom:18px}
html.readable-mode .account p {font-size:14px;line-height:1.7}
html.readable-mode .account strong {font-size:15px}
html.readable-mode .account button {font-size:14px;min-height:44px;padding:8px 12px}
html.readable-mode .rsvp p {font-size:15px;line-height:2}
html.readable-mode .primary-button {font-size:16px;min-height:54px;padding:15px 28px}
html.readable-mode .message-card p {font-size:15px;line-height:2}
html.readable-mode .message-card footer {font-size:12px}
html.readable-mode .empty-state {font-size:13px;line-height:2}
html.readable-mode .upload-card strong {font-size:16px}
html.readable-mode .upload-card small {font-size:12px;line-height:1.6}
html.readable-mode .upload-preview__item {padding:12px;gap:15px}
html.readable-mode .upload-preview p {font-size:12px;line-height:1.7}
html.readable-mode .upload-preview p:first-child {font-size:14px}
html.readable-mode .upload-preview__item>button {min-width:42px;min-height:42px}
html.readable-mode .upload-preview .upload-retry {font-size:13px;min-width:auto;padding:8px 11px}
html.readable-mode .uploader-name {font-size:13px}
html.readable-mode .upload-modes legend {font-size:13px}
html.readable-mode .upload-modes label {font-size:14px;line-height:1.6}
html.readable-mode .uploader-name input,
html.readable-mode .modal input,
html.readable-mode .modal select,
html.readable-mode .modal textarea {font-size:17px !important;line-height:1.6}
html.readable-mode .upload-button {font-size:16px;min-height:54px}
html.readable-mode .upload-progress p,
html.readable-mode .privacy-note {font-size:12px;line-height:1.7}
html.readable-mode .tmi-trigger {min-height:82px}
html.readable-mode .tmi-trigger strong {font-size:16px;line-height:1.75}
html.readable-mode .tmi-number {font-size:9px}
html.readable-mode .tmi-panel p {font-size:14px;line-height:2.05}
html.readable-mode .tmi-more {font-size:14px;min-height:50px}
html.readable-mode .closing h2 {font-size:36px}
html.readable-mode .closing__thanks {font-size:15px !important;line-height:2.1 !important}
html.readable-mode .closing__details {font-size:11px}
html.readable-mode .share-bar button {font-size:14px;min-height:52px}
html.readable-mode .modal__sheet {max-height:92svh;padding-top:50px}
html.readable-mode .modal__sheet h2 {font-size:28px;line-height:1.5}
html.readable-mode .modal form label {font-size:14px;line-height:1.7}
html.readable-mode .modal legend {font-size:14px}
html.readable-mode .modal fieldset label {font-size:15px}
html.readable-mode .modal__hint {font-size:12px;line-height:1.7}
html.readable-mode .success-modal .modal__sheet>p:last-of-type {font-size:14px;line-height:2}
html.readable-mode .lightbox p {font-size:12px}

html.readable-mode .directions-header a {font-size:14px}
html.readable-mode .directions-header button {font-size:14px;min-width:52px;min-height:48px}
html.readable-mode .directions-hero {padding-top:82px;padding-bottom:52px}
html.readable-mode .directions-hero h1 {font-size:34px}
html.readable-mode .eyebrow,
html.readable-mode .section-label {font-size:10px}
html.readable-mode .wedding-date {font-size:11px}
html.readable-mode .venue-card strong {font-size:21px}
html.readable-mode .venue-card small {font-size:11px}
html.readable-mode .map-section p {font-size:13px;line-height:1.8}
html.readable-mode .live-map-panel summary {font-size:14px;min-height:60px}
html.readable-mode .address-section h2,
html.readable-mode .transport-section h2 {font-size:29px}
html.readable-mode .address-card {padding:21px;gap:18px}
html.readable-mode .address-card span {font-size:14px;line-height:1.95}
html.readable-mode .address-card b {font-size:12px;padding:9px 11px;white-space:nowrap}
html.readable-mode .directions-page .lot-address {font-size:12px;line-height:1.7}
html.readable-mode .map-apps a {padding:18px 20px;min-height:58px}
html.readable-mode .map-apps strong {font-size:15px}
html.readable-mode .map-apps span {font-size:12px}
html.readable-mode .transport-list summary {min-height:74px;grid-template-columns:42px 1fr 28px}
html.readable-mode .transport-list summary span {font-size:10px}
html.readable-mode .transport-list summary strong {font-size:17px}
html.readable-mode .transport-list details>div {font-size:14px;line-height:2.05;padding-bottom:26px}
html.readable-mode .taxi-section p {font-size:12px}
html.readable-mode .taxi-section strong {font-size:22px;line-height:1.85}
html.readable-mode .taxi-section button {font-size:15px;min-height:50px}
html.readable-mode .directions-footer p {font-size:24px}
html.readable-mode .directions-footer span {font-size:10px}
html.readable-mode .directions-footer a {font-size:13px}
html.readable-mode .sticky-actions a,
html.readable-mode .sticky-actions button {font-size:14px;min-height:54px}

@media(max-width:380px){
  html.readable-mode .readable-toggle,
  html:not(.readable-mode) .readable-toggle {font-size:10px;padding-left:11px;padding-right:11px}
  html.readable-mode .section h2 {font-size:26px}
  html.readable-mode .intro__copy {font-size:16px}
  html.readable-mode .tmi-trigger {grid-template-columns:54px minmax(0,1fr) 24px}
  html.readable-mode .tmi-panel p {padding-left:62px;padding-right:28px}
}

@media(prefers-reduced-motion:reduce){
  .readable-toggle {transition:none}
}