:root {
  --paper:#f8f4ed;
  --ink:#302b29;
  --muted:#817773;
  --rose:#b95f68;
  --rose-dark:#984850;
  --line:#e9ded5;
  --card:#fffdfa
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'DM Sans',sans-serif;
  -webkit-font-smoothing:antialiased
}
button,input,textarea {
  font:inherit
}
button {
  cursor:pointer
}
.photo-backdrop {
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none
}
.photo-backdrop img {
  position:absolute;
  display:block;
  width:clamp(130px,17vw,225px);
  height:clamp(190px,26vw,330px);
  object-fit:cover;
  opacity:.48;
  border:5px solid rgba(255,253,250,.78);
  border-radius:24px;
  box-shadow:0 12px 34px #503c2920;
  filter:saturate(.78)
}
.photo-one {
  left:2vw;
  top:8vh;
  transform:rotate(-7deg)
}
.photo-two {
  left:5vw;
  top:53vh;
  transform:rotate(5deg)
}
.photo-three {
  left:20vw;
  top:38vh;
  transform:rotate(-4deg)
}
.photo-four {
  right:4vw;
  top:50vh;
  transform:rotate(6deg)
}
.photo-five {
  right:3vw;
  top:9vh;
  transform:rotate(-5deg)
}
.photo-backdrop:after {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(248,244,237,.64)
}
.page {
  position:relative;
  z-index:1;
  max-width:1120px;
  margin:auto;
  padding:0 36px
}
.topbar {
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:14px;
  letter-spacing:.04em
}
.brand-mark {
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#f0d8d4;
  color:var(--rose);
  font-size:18px
}
.top-link {
  color:var(--muted);
  text-decoration:none;
  font-size:13px
}
.top-link:hover {
  color:var(--rose)
}
.hero {
  min-height:435px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:66px 0 58px;
  position:relative
}
.eyebrow {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--rose);
  font-weight:700;
  margin:0 0 22px
}
.hero h1 {
  font:700 clamp(48px,8vw,86px)/1.03 'Playfair Display',Georgia,serif;
  letter-spacing:-.045em;
  margin:0;
  max-width:850px
}
.hero h1 span {
  display:block;
  color:var(--rose);
  font-style:italic
}
.hero-copy {
  max-width:500px;
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
  margin:22px auto 0
}
.ornament {
  color:#d5a5a0;
  font-size:22px;
  margin-top:25px;
  letter-spacing:.55em
}
.content {
  display:grid;
  grid-template-columns:minmax(0,760px);
  justify-content:center;
  gap:24px;
  align-items:start;
  padding:4px 0 78px
}
.left-column {
  display:contents
}
.form-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:28px;
  box-shadow:0 12px 36px #503c2910
}
.form-card {
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:20px 28px;
  text-align:center
}
.form-card h2{
  font:600 24px 'Playfair Display',Georgia,serif;
  letter-spacing:-.02em;
  margin:0
}
.form-card h2 {
  font-size:32px
}
.field {
  margin:0 auto 16px;
  max-width:620px
}
.field input,.field textarea {
  display:block;
  width:100%;
  border:1px solid #e7ddd5;
  border-radius:11px;
  background:#fffdfa;
  padding:14px;
  font-size:13px;
  color:var(--ink);
  outline:0;
  text-align:center;
  transition:border .2s,box-shadow .2s
}
.field input:focus,.field textarea:focus {
  border-color:#d5979b;
  box-shadow:0 0 0 3px #b95f6819
}
.field textarea {
  min-height:142px;
  resize:vertical;
  line-height:1.6
}
.field input::placeholder,.field textarea::placeholder {
  color:#b2a8a2
}
.submit {
  width:100%;
  max-width:620px;
  border:0;
  border-radius:11px;
  padding:14px;
  background:var(--rose);
  color:white;
  font-size:13px;
  font-weight:700;
  box-shadow:0 7px 16px #b95f6830;
  transition:transform .2s,background .2s
}
.submit:hover {
  background:var(--rose-dark);
  transform:translateY(-1px)
}
.privacy {
  font-size:10px;
  color:#a49a94;
  text-align:center;
  margin:13px 0 0
}
.wall-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin:6px 0 18px;
  gap:15px
}
.wall h2 {
  font-size:27px
}
.count {
  color:var(--muted);
  font-size:11px;
  white-space:nowrap
}
.cards {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}
.wish {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px;
  min-height:155px;
  display:flex;
  flex-direction:column;
  box-shadow:0 5px 18px #503c2908;
  animation:appear .35s ease both
}
.wish:before {
  content:'“';
  font:italic 38px 'Playfair Display',Georgia,serif;
  color:#d8a2a0;
  line-height:.8
}
.wish-text {
  font:500 14px/1.7 'DM Sans',sans-serif;
  margin:8px 0 19px;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.wish-author {
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid #f1eae4;
  color:var(--muted);
  font-size:11px
}
.wish-author b {
  color:var(--rose-dark);
  font-weight:600
}
.empty {
  grid-column:1/-1;
  text-align:center;
  border:1px dashed #ddc9c0;
  border-radius:16px;
  padding:36px 20px;
  color:var(--muted);
  font-size:13px;
  line-height:1.7
}
.empty strong {
  display:block;
  font:600 18px 'Playfair Display',Georgia,serif;
  color:var(--ink);
  margin-bottom:5px
}













.toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translate(-50%,16px);
  opacity:0;
  pointer-events:none;
  background:#302b29;
  color:white;
  padding:12px 18px;
  border-radius:30px;
  font-size:12px;
  transition:.25s;
  z-index:5;
  box-shadow:0 8px 24px #0002
}
.toast.show {
  opacity:1;
  transform:translate(-50%,0)
}
footer {
  border-top:1px solid var(--line);
  padding:23px 0 29px;
  display:flex;
  justify-content:space-between;
  color:#a49a94;
  font-size:10px
}
footer span:first-child {
  color:var(--rose);
  font-weight:700
}
@keyframes appear {
  from {
    opacity:0;
    transform:translateY(8px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
.about-section {
  display:grid;
  grid-template-columns:minmax(245px,.78fr) minmax(0,1.22fr);
  gap:40px;
  align-items:center;
  margin:0 0 48px;
  padding:38px;
  background:linear-gradient(135deg,#38232d,#563541);
  color:#fff;
  border-radius:26px;
  box-shadow:0 22px 55px #43263124;
  overflow:hidden
}
.about-kicker {
  margin:0 0 12px;
  color:#f1b8b4;
  font-size:10px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase
}
.about-copy h2 {
  font:600 clamp(34px,4vw,48px)/1.08 'Playfair Display',Georgia,serif;
  letter-spacing:-.035em;
  margin:0
}
.about-description {
  max-width:360px;
  margin:17px 0 24px;
  color:#e6d9db;
  font-size:14px;
  line-height:1.8
}
.about-cta {
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:12px 17px;
  border-radius:999px;
  background:var(--rose);
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  transition:background .2s,transform .2s
}
.about-cta:hover {
  background:#cf717a;
  transform:translateY(-2px)
}
.about-gallery {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(100px,1fr));
  gap:9px;
  min-width:0
}
.about-tile {
  margin:0;
  overflow:hidden;
  min-width:0;
  min-height:0;
  border-radius:13px;
  background:#74525e
}
.about-tile:first-child {
  grid-row:span 2
}
.about-tile:nth-child(6) {
  grid-column:span 2
}
.about-tile img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s;
  filter:saturate(.84)
}
.about-tile:hover img {
  transform:scale(1.07);
  filter:saturate(1.08)
}
.scroll-progress {
  position:fixed;
  z-index:20;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,#b95f68,#e5a9a2);
  transform:scaleX(0);
  transform-origin:left center;
  pointer-events:none;
  box-shadow:0 0 12px #b95f6870
}
.js [data-reveal],.js [data-reveal-item] {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)
}
.js [data-reveal].is-visible,.js [data-reveal-item].is-visible {
  opacity:1;
  transform:translateY(0)
}
.js [data-reveal-item] {
  transition-delay:var(--reveal-delay,0ms)
}
.wall-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin:6px 0 18px;
  gap:15px
}
.wall h2 {
  font-size:27px
}
.count {
  color:var(--muted);
  font-size:11px;
  white-space:nowrap
}
.cards {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}
.wish {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px;
  min-height:155px;
  display:flex;
  flex-direction:column;
  box-shadow:0 5px 18px #503c2908;
  animation:appear .35s ease both
}
.wish:before {
  content:'“';
  font:italic 38px 'Playfair Display',Georgia,serif;
  color:#d8a2a0;
  line-height:.8
}
.wish-text {
  font:500 14px/1.7 'DM Sans',sans-serif;
  margin:8px 0 19px;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.wish-author {
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid #f1eae4;
  color:var(--muted);
  font-size:11px
}
.wish-author b {
  color:var(--rose-dark);
  font-weight:600
}
.empty {
  grid-column:1/-1;
  text-align:center;
  border:1px dashed #ddc9c0;
  border-radius:16px;
  padding:36px 20px;
  color:var(--muted);
  font-size:13px;
  line-height:1.7
}
.empty strong {
  display:block;
  font:600 18px 'Playfair Display',Georgia,serif;
  color:var(--ink);
  margin-bottom:6px
}













.toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translate(-50%,16px);
  opacity:0;
  pointer-events:none;
  background:#302b29;
  color:white;
  padding:12px 18px;
  border-radius:30px;
  font-size:12px;
  transition:.25s;
  z-index:5;
  box-shadow:0 8px 24px #0002
}
.toast.show {
  opacity:1;
  transform:translate(-50%,0)
}
footer {
  border-top:1px solid var(--line);
  padding:23px 0 29px;
  display:flex;
  justify-content:space-between;
  color:#a49a94;
  font-size:10px
}
footer span:first-child {
  color:var(--rose);
  font-weight:700
}
@keyframes appear {
  from {
    opacity:0;
    transform:translateY(8px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@media(max-width:850px) {
  .page {
    padding:0 24px
  }
  .content {
    grid-template-columns:minmax(0,760px);
    gap:22px
  }
  .hero {
    min-height:390px
  }
  .about-section {
    grid-template-columns:minmax(210px,.72fr) minmax(0,1.28fr);
    gap:24px;
    padding:30px
  }
  .about-gallery {
    grid-template-rows:repeat(3,minmax(86px,1fr));
    gap:7px
  }
}
@media(max-width:640px) {
  html,body {
    width:100%;
    overflow-x:hidden
  }
  .page {
    width:100%;
    padding:0 16px
  }
  .topbar {
    height:66px;
    gap:10px
  }
  .brand {
    gap:7px;
    font-size:12px;
    white-space:nowrap
  }
  .brand-mark {
    width:29px;
    height:29px;
    flex:0 0 29px
  }
  .top-link {
    font-size:11px;
    white-space:nowrap
  }
  .hero {
    min-height:0;
    padding:58px 0 44px
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:.14em;
    margin-bottom:18px
  }
  .hero h1 {
    font-size:clamp(38px,11vw,58px);
    letter-spacing:-.04em
  }
  .hero-copy {
    font-size:13px;
    line-height:1.65;
    margin-top:17px
  }
  .about-section {
    grid-template-columns:1fr;
    gap:22px;
    margin-bottom:34px;
    padding:23px;
    border-radius:22px
  }
  .about-copy h2 {
    font-size:36px
  }
  .about-description {
    font-size:13px;
    line-height:1.7;
    margin:13px 0 19px
  }
  .about-gallery {
    grid-template-rows:repeat(3,minmax(76px,24vw));
    gap:7px
  }
  .about-tile {
    border-radius:10px
  }
  .content {
    display:flex;
    flex-direction:column;
    gap:22px;
    padding:0 0 48px;
    width:100%
  }
  .left-column {
    display:flex;
    flex-direction:column;
    gap:28px;
    width:100%;
    min-width:0
  }
  .form-card {
    width:100%;
    padding:18px 0
  }
  .form-card h2 {
    font-size:clamp(26px,8vw,32px);
    font-family:'Playfair Display',Georgia,serif;
    font-weight:600;
    line-height:1.2;
    margin-bottom:20px
  }
  .form-card form {
    width:100%
  }
  .field {
    width:100%;
    max-width:620px;
    margin:0 auto 14px
  }
  .field input,.field textarea {
    width:100%;
    font-family:'DM Sans',sans-serif;
    font-size:14px;
    padding:14px 12px
  }
  .field textarea {
    min-height:126px
  }
  .submit {
    display:block;
    width:100%;
    max-width:620px;
    margin:0 auto;
    font-family:'DM Sans',sans-serif;
    font-size:13px
  }
  .privacy {
    font-family:'DM Sans',sans-serif
  }







  .photo-backdrop img {
    width:94px;
    height:138px;
    opacity:.42;
    border-width:3px;
    border-radius:14px
  }
  .photo-one {
    left:-18px;
    top:10vh;
    transform:rotate(-9deg)
  }
  .photo-two {
    left:-22px;
    top:58vh;
    transform:rotate(6deg)
  }
  .photo-three {
    left:auto;
    right:-22px;
    top:35vh;
    transform:rotate(-5deg)
  }
  .photo-four {
    left:auto;
    right:-18px;
    top:76vh;
    transform:rotate(7deg)
  }
  .photo-five {
    left:auto;
    right:-20px;
    top:8vh;
    transform:rotate(6deg)
  }
  footer {
    gap:10px;
    flex-wrap:wrap;
    font-size:9px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto!important
  }
  .js [data-reveal],.js [data-reveal-item] {
    opacity:1!important;
    transform:none!important;
    transition:none!important
  }
  .scroll-progress {
    display:none
  }
  *,*::before,*::after {
    animation-duration:.01ms!important;
    transition-duration:.01ms!important
  }
}

/* Shared memories album */
.content { grid-template-columns:minmax(0, 900px); }
.left-column { display:block; }
.memories-section { width:100%; padding:28px 0 0; }
.memories-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.memories-kicker { margin:0 0 8px; color:var(--rose); font-size:10px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; }
.memories-heading h2 { margin:0; font:600 clamp(32px,5vw,44px)/1.1 'Playfair Display',Georgia,serif; letter-spacing:-.03em; }
.memories-intro { max-width:560px; margin:12px 0 0; color:var(--muted); font-size:14px; line-height:1.7; }
.memory-count { flex:none; padding:9px 13px; border:1px solid #e8d8d0; border-radius:99px; color:var(--rose-dark); background:#fffdfa9c; font-size:11px; }
.memory-form { padding:22px; border:1px solid #eaded5; border-radius:20px; background:#fffdfa9c; }
.memory-form-top { display:grid; grid-template-columns:minmax(0,1fr) 140px; gap:12px; }
.memory-dropzone { min-height:112px; display:flex; align-items:center; gap:15px; padding:20px; border:1px dashed #d9bcb2; border-radius:15px; color:var(--ink); cursor:pointer; transition:border-color .2s,background .2s,transform .2s; }
.memory-dropzone:hover,.memory-dropzone:focus-within { border-color:var(--rose); background:#fff6f3; transform:translateY(-1px); }
.upload-icon { width:42px; height:42px; display:grid; place-items:center; flex:none; border-radius:50%; background:#f5e5df; color:var(--rose-dark); font-size:25px; }
.memory-dropzone strong,.memory-dropzone small { display:block; }
.memory-dropzone strong { font-size:13px; overflow-wrap:anywhere; }
.memory-dropzone small { margin-top:5px; color:var(--muted); font-size:11px; }
.upload-arrow { margin-left:auto; color:var(--rose); font-size:19px; }
.memory-preview { position:relative; height:112px; overflow:hidden; border-radius:15px; background:#eee5df; }
.memory-preview[hidden] { display:none; }
.memory-preview img { width:100%; height:100%; object-fit:cover; }
.remove-photo { position:absolute; top:7px; right:7px; width:28px; height:28px; border:0; border-radius:50%; background:#302b29d9; color:white; font-size:20px; line-height:1; }
.memory-fields { display:grid; grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr); gap:12px; margin-top:12px; }
.memory-fields input,.memory-fields textarea { width:100%; min-width:0; border:1px solid #e7ddd5; border-radius:11px; background:#fff; padding:13px 14px; color:var(--ink); font-size:13px; outline:0; transition:border .2s,box-shadow .2s; }
.memory-fields input:focus,.memory-fields textarea:focus { border-color:#d5979b; box-shadow:0 0 0 3px #b95f6819; }
.memory-fields textarea { min-height:49px; resize:vertical; line-height:1.5; }
.memory-fields ::placeholder { color:#b2a8a2; }
.memory-form-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:14px; }
.memory-form-bottom p { margin:0; color:#9a8f89; font-size:10px; line-height:1.5; }
.memory-submit { border:0; border-radius:11px; padding:13px 17px; background:var(--rose); color:white; font-size:12px; font-weight:700; box-shadow:0 7px 16px #b95f6830; transition:transform .2s,background .2s,opacity .2s; }
.memory-submit:hover { background:var(--rose-dark); transform:translateY(-1px); }
.memory-submit:disabled { cursor:wait; opacity:.7; }
.memory-submit.is-loading span { display:inline-block; animation:spin .8s linear infinite; }
.memory-status { min-height:17px; margin:10px 0 0; color:var(--rose-dark); font-size:11px; }
.memory-status.is-error { color:#a63f45; }
.memory-feed-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:34px 0 15px; }
.memory-feed-heading h3 { margin:0; font:600 21px 'Playfair Display',Georgia,serif; }
.memory-feed-heading span { color:#9a8f89; font-size:11px; }
.memory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:16px; }
.memory-card { overflow:hidden; border:1px solid #eaded5; border-radius:16px; background:#fffdfa; box-shadow:0 8px 24px #503c2910; animation:memory-in .45s both; animation-delay:var(--card-delay,0ms); transition:transform .25s,box-shadow .25s; }
.memory-card:hover { transform:translateY(-4px); box-shadow:0 14px 30px #503c2920; }
.memory-image-link { display:block; overflow:hidden; background:#eee6e0; }
.memory-image { display:block; width:100%; height:auto; max-height:500px; object-fit:cover; transition:transform .5s; }
.memory-card:hover .memory-image { transform:scale(1.025); }
.memory-card-copy { padding:13px 14px 14px; }
.memory-caption { margin:0 0 12px; color:#514843; font-size:12px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.memory-byline { display:flex; align-items:center; justify-content:space-between; gap:9px; color:var(--muted); font-size:10px; }
.memory-byline strong { color:var(--rose-dark); font-size:11px; font-weight:700; overflow-wrap:anywhere; }
.memory-byline time { flex:none; text-align:right; }
.memory-empty { grid-column:1/-1; padding:42px 20px; border:1px dashed #ddc9c0; border-radius:16px; color:var(--muted); text-align:center; }
.memory-empty>span { display:block; margin-bottom:8px; color:#d29a98; font-size:28px; }
.memory-empty strong { display:block; color:var(--ink); font:600 18px 'Playfair Display',Georgia,serif; }
.memory-empty p { margin:8px 0 0; font-size:12px; line-height:1.6; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes memory-in { from { opacity:0; transform:translateY(14px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes spin { to { transform:rotate(360deg); } }
@media(max-width:850px) { .memory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) {
  .content { display:flex; }
  .left-column { display:block; width:100%; }
  .memories-section { padding:12px 0 0; }
  .memories-heading { display:block; margin-bottom:18px; }
  .memories-heading h2 { font-size:36px; }
  .memories-intro { font-size:13px; }
  .memory-count { display:inline-flex; margin-top:14px; }
  .memory-form { padding:14px; border-radius:16px; }
  .memory-form-top { grid-template-columns:minmax(0,1fr) 84px; gap:8px; }
  .memory-dropzone { min-height:96px; gap:9px; padding:12px 10px; }
  .upload-icon { width:34px; height:34px; font-size:21px; }
  .memory-dropzone strong { font-size:11px; }
  .memory-dropzone small { font-size:9px; line-height:1.4; }
  .upload-arrow { display:none; }
  .memory-preview { height:96px; }
  .memory-fields { grid-template-columns:1fr; gap:9px; margin-top:9px; }
  .memory-fields input,.memory-fields textarea { padding:12px; font-size:13px; }
  .memory-fields textarea { min-height:68px; }
  .memory-form-bottom { align-items:stretch; flex-direction:column; gap:10px; }
  .memory-submit { width:100%; padding:13px 10px; }
  .memory-status { font-size:10px; }
  .memory-feed-heading { margin-top:27px; }
  .memory-feed-heading h3 { font-size:19px; }
  .memory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .memory-card { border-radius:12px; }
  .memory-card-copy { padding:10px 9px; }
  .memory-caption { font-size:11px; }
  .memory-byline { align-items:flex-start; flex-direction:column; gap:3px; font-size:9px; }
  .memory-byline time { text-align:left; }
}
@media(max-width:370px) { .memory-form-top { grid-template-columns:minmax(0,1fr) 70px; } .memory-grid { gap:7px; } }