* {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #f5f0e9;
      color: #55483f;
      font-family: Georgia, serif;
      text-align: center;
    }

    .container {
      width: 100%;
      max-width: 650px;
      padding: 30px 20px;
    }

    .side-menu {
      position: fixed;
      top: 50%;
      left: 28px;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 12px;
      text-align: left;
    }

    .side-menu a {
      display: block;
      padding: 12px 18px;
      border-radius: 10px;
      color: #806d5c;
      font-size: 18px;
      text-decoration: none;
      transition: background 160ms ease, color 160ms ease;
    }

    .side-menu a:hover,
    .side-menu a:focus-visible {
      background: #fff;
      color: #55483f;
      outline: 2px solid #c8b6a4;
      outline-offset: 3px;
    }

    .info-section {
      margin-top: 36px;
      padding: 24px;
      background: rgba(255, 255, 255, 0.65);
      border-radius: 12px;
      scroll-margin-top: 24px;
    }

    .info-section h2 {
      margin: 0 0 12px;
      font-size: 27px;
      font-weight: normal;
    }

    .info-section p {
      margin: 0;
      line-height: 1.6;
      color: #806d5c;
    }

    @media (min-width: 1001px) {
      body { padding-left: 190px; padding-right: 190px; }
    }

    @media (max-width: 1000px) {
      body { flex-direction: column; }
      .side-menu {
        position: static;
        transform: none;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px;
        padding: 18px 12px 0;
      }
      .side-menu a { padding: 10px 14px; font-size: 17px; }
    }

    .couple-photo {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 16px;
      margin: 0 0 32px;
      box-shadow: 0 8px 28px rgba(85, 72, 63, 0.12);
    }

    .subtitle {
      font-family: Arial, sans-serif;
      font-size: 12px;
      letter-spacing: 4px;
      color: #8b7563;
      text-transform: uppercase;
    }

    h1 {
      font-size: clamp(42px, 9vw, 75px);
      font-weight: normal;
      margin: 25px 0 15px;
    }

    .date {
      font-size: 19px;
      color: #806d5c;
      margin-bottom: 45px;
    }

    .countdown {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }

    .time-box {
      background: #ffffff;
      border-radius: 12px;
      padding: 22px 5px;
      box-shadow: 0 4px 18px rgba(0,0,0,0.04);
    }

    .number {
      font-family: Arial, sans-serif;
      font-size: clamp(25px, 6vw, 44px);
      font-weight: 300;
      font-variant-numeric: tabular-nums;
    }

    .label {
      margin-top: 10px;
      font-family: Arial, sans-serif;
      font-size: 10px;
      letter-spacing: 1px;
      color: #8b7563;
    }

    .footer {
      margin-top: 45px;
      font-style: italic;
      font-size: 17px;
      color: #806d5c;
    }

    @media (max-width: 400px) {
      .countdown {
        gap: 6px;
      }

      .time-box {
        padding: 16px 3px;
      }

      .label {
        font-size: 9px;
        letter-spacing: 0;
      }
    }
  
.container.wide { max-width: 1000px; }
h1 { font-size: clamp(32px, 6vw, 52px); }
[hidden] { display:none!important; }
section, .panel { margin: 26px 0; padding: 24px; background: #ffffffb3; border-radius: 12px; text-align: left; }
h2 { font-size: 27px; font-weight: normal; margin: 0 0 18px; }
p { line-height: 1.65; }
label { display:block; margin:14px 0 6px; }
input:not([type=radio]):not([type=checkbox]), textarea, select { max-width:100%; width:100%; padding:12px; border:1px solid #c8b6a4; border-radius:8px; font:inherit; background:white; color:#55483f; }
input.pin { max-width:240px; font:24px Arial,sans-serif; letter-spacing:6px; }
button, .button { display:inline-block; padding:12px 16px; margin:12px 6px 0 0; background:#55483f; color:white; border:0; border-radius:8px; font:inherit; cursor:pointer; text-decoration:none; }
a { color:#695440; }
:focus-visible { outline:2px solid #806d5c; outline-offset:4px; }
fieldset { margin:16px 0; padding:12px 16px; border:1px solid #c8b6a4; border-radius:8px; }
.notice { padding:14px; background:#e4ebdf; border-radius:8px; }
.error { padding:14px; background:#f5dcd6; border-radius:8px; }
.small { font:14px/1.6 Arial,sans-serif; color:#806d5c; }
.palette { display:block; width:100%; height:auto; border-radius:12px; margin-top:20px; }
.gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.gallery figure { margin:0; background:white; border-radius:12px; overflow:hidden; }
.gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.gallery figcaption { padding:12px; text-align:left; }
.table-scroll { overflow:auto; }
table { width:100%; border-collapse:collapse; text-align:left; }
th,td { padding:12px 8px; border-bottom:1px solid #dfd4c8; vertical-align:top; }
.inline { display:inline; }
.inline button { margin:0 4px 6px; font-size:14px; }
code { overflow-wrap:anywhere; }
footer { margin:30px 0; }
@media(max-width:520px) { .gallery { grid-template-columns:1fr; } section,.panel { padding:18px; } }

.table-assignment { background: #e4ebdf; padding: 18px; border-radius: 10px; font-size: 21px; }
.seating-plan { border: 1px solid #c8b6a4; }
.table-choice { min-width: 140px; }