:root {
  --green: #17683b;
  --green-dark: #193f2d;
  --green-soft: #eaf2ec;

  --red: #d43a3c;

  --cream: #fbf8f3;
  --white: #fffefd;

  --text: #253b30;
  --muted: #66766d;

  --line: rgba(37, 62, 47, .10);

  --orange: #d79845;

  --shadow:
    0 10px 28px rgba(31, 50, 37, .055);

  --serif:
    Georgia,
    "Times New Roman",
    serif;

  --sans:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Inter,
    Helvetica,
    Arial,
    sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;

  min-height: 100%;

  background:
    var(--cream);

  color:
    var(--text);

  font-family:
    var(--sans);
}

body {
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app {
  min-height: 100vh;
}


/* ============================================================
   HEADER
   ============================================================ */

.topbar {
  position: relative;
  z-index: 30;

  display: grid;

  grid-template-columns:
    280px
    1fr
    280px;

  align-items: center;

  height: 76px;

  padding:
    0
    max(42px, calc((100vw - 1190px) / 2 + 40px));

  background:
    rgba(255, 254, 252, .985);

  border-bottom:
    1px solid rgba(31, 59, 42, .06);

  box-shadow:
    0 4px 18px rgba(32, 49, 38, .025);
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
}

.brand-icon {
  display: grid;
  place-items: center;

  width: 43px;
  height: 43px;

  border-radius: 11px;

  background:
    linear-gradient(145deg, #377c54, #195f36);

  color: white;

  box-shadow:
    0 8px 18px rgba(28, 92, 54, .17);

  font-size: 25px;
}

.brand strong {
  display: block;

  color:
    var(--green-dark);

  font:
    600 21px/1
    var(--serif);
}

.brand small {
  display: block;

  margin-top: 6px;

  color:
    #718077;

  font-size: 12px;
}

.red {
  color: var(--red);
}


.nav {
  display: flex;
  align-self: stretch;
  justify-content: center;

  gap: 4px;
}

.nav-item {
  position: relative;

  width: 108px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 4px;

  padding: 0;

  border: 0;

  background:
    transparent;

  color:
    #344a3e;
}

.nav-icon {
  font-size: 23px;
  line-height: 1;
}

.nav-item > span:last-child {
  font-size: 9px;
}

.nav-item.active::after {
  position: absolute;

  right: 12px;
  bottom: 0;
  left: 12px;

  height: 2px;

  background:
    var(--red);

  content: "";
}


.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 12px;
}

.premium {
  display: flex;
  align-items: center;

  gap: 6px;

  height: 38px;

  padding:
    0 15px;

  border:
    1px solid rgba(213, 153, 63, .35);

  border-radius:
    11px;

  color:
    #ce902d;

  background:
    rgba(255,255,255,.75);

  font-size:
    11px;
}

.user-pill {
  display: flex;
  align-items: center;

  gap: 8px;

  height: 38px;

  padding:
    0 14px;

  border:
    1px solid rgba(29,57,40,.10);

  border-radius:
    12px;

  color:
    #293d32;

  background:
    white;
}

.user-pill strong {
  font-size: 12px;
}


/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;

  height: 348px;

  overflow: hidden;

  isolation: isolate;

  background:
    radial-gradient(
      ellipse at 96% 77%,
      rgba(211,55,57,.23),
      rgba(211,55,57,.07) 32%,
      transparent 59%
    ),
    radial-gradient(
      ellipse at 67% 2%,
      rgba(41, 120, 67, .09),
      transparent 45%
    ),
    linear-gradient(
      90deg,
      #fcfaf6 0%,
      #fcfaf6 27%,
      rgba(252,250,246,.65) 42%,
      rgba(252,250,246,.05) 63%
    );
}

.hero-copy {
  position: absolute;

  z-index: 10;

  top: 47px;
  left:
    max(
      95px,
      calc((100vw - 1190px) / 2 + 108px)
    );

  width: 430px;
}

.eyebrow {
  margin-bottom: 18px;

  color:
    var(--red);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    .13em;
}

.hero h1 {
  margin: 0;

  color:
    var(--green-dark);

  font:
    500 43px/.99
    var(--serif);

  letter-spacing:
    -.043em;
}

.hero h1 span {
  color:
    var(--red);
}

.hero-copy p {
  margin:
    19px 0 0;

  color:
    #53655a;

  font-size:
    12.5px;

  line-height:
    1.5;
}

.hearts {
  letter-spacing:
    -3px;
}

.signature {
  position: relative;

  display: inline-block;

  margin:
    26px 0 0 19px;

  color:
    #247347;

  font:
    italic 24px/1
    "Snell Roundhand",
    "Segoe Script",
    "Brush Script MT",
    cursive;
}

.signature-heart {
  display: inline-block;

  margin-left: 15px;

  color:
    var(--red);

  font:
    35px/1
    var(--sans);

  transform:
    rotate(-7deg);
}


.couple {
  position: absolute;

  z-index: -1;

  top: 0;
  bottom: 0;

  left: 37.3%;

  width: 40.5%;

  background:
    linear-gradient(
      90deg,
      rgba(250,248,243,1) 0%,
      rgba(250,248,243,.60) 8%,
      transparent 22%,
      transparent 83%,
      rgba(250,248,243,.15) 97%
    ),
    linear-gradient(
      0deg,
      rgba(250,248,243,.26),
      transparent 17%
    ),
    url("/assets/couple.jpg")
      center 47% / cover
      no-repeat;

  filter:
    brightness(1.02)
    saturate(.98)
    contrast(.99);
}


.scene-left {
  position: absolute;

  z-index: -2;

  left: 0;
  bottom: 0;

  width: 21%;
  height: 57%;

  opacity: .75;

  background:
    url("/assets/scene-left.png")
      left bottom / contain
      no-repeat;
}

.scene-left:empty {
  background-image:
    none;
}

.scene-left::after {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(251,248,243,.78)
    );

  content: "";
}


.colosseum {
  position: absolute;

  z-index: -2;

  top: 25px;
  right: 11%;

  width: 280px;

  color:
    #718077;
}

.italy-flag {
  position: absolute;

  z-index: 5;

  top: 37px;
  right:
    max(
      28px,
      calc((100vw - 1190px) / 2 + 14px)
    );

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  width: 74px;
  height: 44px;

  overflow: hidden;

  border:
    3px solid rgba(255,255,255,.86);

  background:
    white;

  box-shadow:
    0 8px 20px rgba(38,54,42,.15);

  transform:
    rotate(-9deg);
}

.italy-flag i:nth-child(1) {
  background: #15864a;
}

.italy-flag i:nth-child(2) {
  background: white;
}

.italy-flag i:nth-child(3) {
  background: #d83235;
}


/* ============================================================
   PROGRESS
   ============================================================ */

.progress-card {
  position: absolute;

  z-index: 12;

  top: 147px;

  right:
    max(
      66px,
      calc((100vw - 1190px) / 2 + 65px)
    );

  width: 293px;

  min-height: 144px;

  padding:
    19px 22px;

  border:
    1px solid rgba(255,255,255,.80);

  border-radius:
    19px;

  background:
    rgba(255,255,255,.95);

  box-shadow:
    0 17px 42px rgba(31,49,36,.10);

  backdrop-filter:
    blur(12px);
}

.progress-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.progress-top span {
  display: block;

  margin-bottom: 4px;

  color:
    #65756b;

  font-size:
    11px;
}

.progress-top strong {
  display: block;

  color:
    var(--green);

  font:
    600 35px/1
    var(--serif);
}

.progress-check {
  display: grid;
  place-items: center;

  width: 29px;
  height: 29px;

  border:
    2px solid
    rgba(23,104,59,.55);

  border-radius:
    50%;

  color:
    var(--green);

  font-weight:
    700;
}

.progress-track {
  height: 7px;

  margin-top: 15px;

  overflow: hidden;

  border-radius:
    999px;

  background:
    #e9ebe7;
}

.progress-fill {
  width: 0%;
  height: 100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      #17683b,
      #4a8c61
    );

  transition:
    width .3s ease;
}

.progress-stats {
  display: flex;

  gap: 16px;

  margin-top: 12px;

  color:
    #68766e;

  font-size:
    9px;
}

.progress-stats b {
  color:
    #415448;
}


/* ============================================================
   WAVE
   ============================================================ */

.wave {
  position: relative;

  z-index: 20;

  height: 27px;

  margin-top: -17px;
}

.wave svg {
  width: 100%;
  height: 30px;
}

.wave path {
  fill: none;

  vector-effect:
    non-scaling-stroke;
}

.green-wave {
  stroke:
    #187041;

  stroke-width:
    4px;
}

.red-wave {
  stroke:
    #d33b3d;

  stroke-width:
    3px;
}

.italy-heart {
  position: absolute;

  top: -4px;
  left: 50%;

  display: flex;

  width: 43px;
  height: 43px;

  overflow: hidden;

  border:
    3px solid white;

  border-radius:
    50% 50% 46% 46%;

  background:
    white;

  box-shadow:
    0 4px 12px rgba(25,47,32,.13);

  transform:
    translateX(-50%) rotate(45deg);
}

.italy-heart span {
  flex: 1;
}

.hg {
  background: #158349;
}

.hw {
  background: white;
}

.hr {
  background: #d93639;
}


/* ============================================================
   LIST
   ============================================================ */

.list-section {
  position: relative;

  max-width: 1190px;

  margin: 0 auto;

  padding:
    11px
    95px
    55px;
}

.list-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.list-eyebrow {
  margin-bottom: 7px;

  color:
    var(--green);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .14em;
}

.list-head h2 {
  margin: 0;

  color:
    var(--green-dark);

  font:
    500 30px/1
    var(--serif);

  letter-spacing:
    -.035em;
}

.add-btn {
  display: flex;
  align-items: center;

  gap: 7px;

  height: 38px;

  margin-bottom: 2px;

  padding:
    0 18px;

  border:
    0;

  border-radius:
    999px;

  background:
    var(--green);

  color:
    white;

  box-shadow:
    0 8px 17px rgba(23,104,59,.13);

  font-size:
    11px;

  font-weight:
    600;
}


.controls {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  margin-top: 19px;
}

.left-controls {
  width: 700px;
}

.search {
  display: flex;
  align-items: center;

  width: 240px;
  height: 34px;

  padding:
    0 13px;

  border:
    1px solid rgba(37,65,48,.09);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.82);

  color:
    #829087;
}

.search span {
  font-size:
    18px;
}

.search input {
  flex: 1;

  min-width: 0;

  margin-left: 6px;

  border: 0;
  outline: 0;

  background:
    transparent;

  color:
    var(--text);

  font-size:
    11px;
}

.search input::placeholder {
  color:
    #89958e;
}


.categories {
  display: flex;
  align-items: center;

  gap: 7px;

  margin-top: 13px;

  white-space: nowrap;
}

.cat-btn,
.status-tab {
  height: 29px;

  padding:
    0 13px;

  border:
    1px solid rgba(39,67,50,.10);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.84);

  color:
    #53645a;

  font-size:
    9px;
}

.cat-btn.active {
  border-color:
    var(--green);

  background:
    var(--green);

  color:
    white;
}


.status-tabs {
  display: flex;

  overflow: hidden;

  margin-top: 0;

  border:
    1px solid rgba(39,67,50,.09);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.85);
}

.status-tab {
  border:
    0;

  border-radius:
    0;

  background:
    transparent;
}

.status-tab + .status-tab {
  border-left:
    1px solid rgba(39,67,50,.08);
}

.status-tab.active {
  background:
    white;

  color:
    var(--green);

  box-shadow:
    0 2px 8px rgba(26,46,32,.05);
}


/* ============================================================
   CARDS
   ============================================================ */

.cards {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 14px;

  margin-top: 13px;
}

.card {
  position: relative;

  min-height: 161px;

  padding:
    17px 18px 13px;

  border:
    1px solid rgba(38,65,48,.08);

  border-radius:
    15px;

  background:
    rgba(255,255,255,.91);

  box-shadow:
    var(--shadow);
}

.card-main {
  display: flex;

  gap: 14px;
}

.item-icon {
  flex:
    0 0 44px;

  display: grid;
  place-items: center;

  width: 44px;
  height: 44px;

  border-radius:
    12px;

  background:
    #f7f1e8;

  font-size:
    22px;
}

.card-category {
  display: flex;
  align-items: center;

  gap: 8px;

  min-height: 13px;

  color:
    var(--green);

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}

.priority {
  color:
    var(--red);
}

.card h3 {
  margin:
    4px 0 5px;

  color:
    #294638;

  font-size:
    13px;

  font-weight:
    600;
}

.card-meta {
  display: flex;
  align-items: center;

  gap: 9px;

  color:
    #4f5f55;

  font-size:
    9px;
}

.status-badge {
  display: inline-flex;
  align-items: center;

  gap: 4px;

  min-height: 21px;

  padding:
    0 8px;

  border-radius:
    999px;

  background:
    var(--green-soft);

  color:
    #43805a;
}

.status-badge.missing {
  background:
    #f4eee5;

  color:
    #887763;
}

.status-badge.reserved {
  background:
    #fbeddc;

  color:
    #b27631;
}

.reservation {
  margin-top: 7px;

  color:
    #49745a;

  font-size:
    9px;
}

.description {
  margin:
    7px 0 0;

  color:
    #69766e;

  font-size:
    9px;
}

.card-footer {
  position: absolute;

  right: 14px;
  bottom: 11px;
  left: 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-top: 9px;

  border-top:
    1px solid rgba(37,62,47,.08);
}

.card-primary {
  min-height: 29px;

  padding:
    0 12px;

  border:
    1px solid rgba(29,102,57,.18);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.84);

  color:
    #397150;

  font-size:
    9px;

  font-weight:
    600;
}

.card-primary.offer {
  border-color:
    var(--green);

  background:
    var(--green);

  color:
    white;
}

.card-actions {
  display: flex;

  gap: 7px;
}

.icon-btn {
  display: grid;
  place-items: center;

  width: 29px;
  height: 29px;

  border:
    1px solid rgba(35,63,46,.10);

  border-radius:
    9px;

  background:
    white;

  color:
    #65756c;
}

.empty {
  padding:
    60px 0;

  text-align:
    center;

  color:
    #77847d;
}


/* ============================================================
   MODALS
   ============================================================ */

.modal-backdrop {
  position: fixed;

  z-index: 1000;

  inset: 0;

  display: grid;
  place-items: center;

  padding: 20px;

  background:
    rgba(20,36,26,.35);

  backdrop-filter:
    blur(8px);
}

.modal-backdrop[hidden] {
  display: none;
}

.modal {
  position: relative;

  width:
    min(480px, 100%);

  padding:
    29px;

  border:
    1px solid rgba(255,255,255,.7);

  border-radius:
    22px;

  background:
    #fffefd;

  box-shadow:
    0 24px 75px rgba(18,38,25,.18);
}

.small-modal {
  width:
    min(390px, 100%);
}

.modal-close {
  position: absolute;

  top: 14px;
  right: 14px;

  display: grid;
  place-items: center;

  width: 31px;
  height: 31px;

  border: 0;
  border-radius: 50%;

  background:
    #f4f3ef;

  color:
    #5f6f66;

  font-size:
    20px;
}

.modal-kicker {
  color:
    var(--red);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .13em;
}

.modal h3 {
  margin:
    7px 0 24px;

  color:
    var(--green-dark);

  font:
    500 29px/1
    var(--serif);
}

.modal label {
  display: block;

  margin-top: 14px;
}

.modal label > span {
  display: block;

  margin-bottom: 6px;

  color:
    #56675d;

  font-size:
    11px;

  font-weight:
    600;
}

.modal input,
.modal select,
.modal textarea {
  width: 100%;

  padding:
    11px 12px;

  border:
    1px solid rgba(38,66,49,.13);

  border-radius:
    10px;

  outline: 0;

  background:
    white;

  color:
    var(--text);
}

.form-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 12px;
}

.priority-check {
  display: flex !important;
  align-items: center;

  gap: 8px;
}

.priority-check input {
  width: auto;
}

.priority-check span {
  margin: 0 !important;
}

.primary-action {
  width: 100%;
  height: 42px;

  margin-top: 22px;

  border: 0;

  border-radius:
    11px;

  background:
    var(--green);

  color:
    white;

  font-weight:
    700;
}

.toast {
  position: fixed;

  z-index: 1500;

  right: 25px;
  bottom: 25px;

  padding:
    12px 17px;

  border-radius:
    999px;

  background:
    var(--green-dark);

  color:
    white;

  box-shadow:
    0 13px 34px rgba(16,42,26,.2);

  font-size:
    12px;

  opacity: 0;

  pointer-events: none;

  transform:
    translateY(15px);

  transition:
    .22s ease;
}

.toast.show {
  opacity: 1;

  transform:
    translateY(0);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1000px) {

  .topbar {
    grid-template-columns:
      1fr auto;

    padding:
      0 22px;
  }

  .nav {
    display: none;
  }

  .premium {
    display: none;
  }

  .hero-copy {
    left: 30px;

    width: 44%;
  }

  .hero h1 {
    font-size:
      37px;
  }

  .couple {
    left: 34%;

    width: 54%;
  }

  .progress-card {
    right: 20px;

    width: 240px;

    transform:
      scale(.90);

    transform-origin:
      right center;
  }

  .list-section {
    padding:
      12px
      30px
      45px;
  }

  .left-controls {
    width: 67%;
  }

  .categories {
    overflow-x: auto;

    padding-bottom: 4px;
  }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 680px) {

  .topbar {
    height: 64px;

    padding:
      0 14px;
  }

  .brand-icon {
    width: 37px;
    height: 37px;
  }

  .brand strong {
    font-size:
      18px;
  }

  .brand small {
    font-size:
      10px;
  }

  .user-pill {
    padding:
      0 10px;
  }

  .hero {
    height:
      470px;
  }

  .hero-copy {
    top: 28px;
    left: 18px;

    width:
      calc(100% - 36px);
  }

  .eyebrow {
    margin-bottom:
      11px;
  }

  .hero h1 {
    width: 92%;

    font-size:
      34px;
  }

  .hero-copy p {
    width: 92%;

    font-size:
      12px;
  }

  .signature {
    margin-top:
      19px;

    font-size:
      20px;
  }

  .couple {
    top: 169px;

    left: 6%;

    width: 101%;

    height: 301px;

    opacity:
      .78;
  }

  .colosseum {
    display: none;
  }

  .italy-flag {
    top: 21px;
    right: 15px;

    width: 54px;
    height: 34px;
  }

  .progress-card {
    top: auto;
    right: 12px;
    bottom: 20px;

    width: 225px;

    transform:
      scale(.85);

    transform-origin:
      right bottom;
  }

  .wave {
    margin-top:
      -15px;
  }

  .list-section {
    padding:
      15px
      14px
      35px;
  }

  .list-head {
    align-items:
      center;
  }

  .list-head h2 {
    font-size:
      26px;
  }

  .add-btn {
    height:
      35px;

    padding:
      0 13px;
  }

  .controls {
    display: block;
  }

  .left-controls {
    width: 100%;
  }

  .search {
    width: 100%;
  }

  .status-tabs {
    width: fit-content;

    margin-top: 11px;
  }

  .cards {
    grid-template-columns:
      1fr;
  }

  .card {
    min-height:
      164px;
  }

  .form-grid {
    grid-template-columns:
      1fr;
  }

}