:root {
      --fabric-warm: #c8a97e;
      --fabric-mid: #b08c5a;
      --fabric-dark: #7a5c35;
	  
	  /* stripes around main content */
      --blanket-red: #4740c3; /* this is actually blue, chagned my mind but didn't want to update everything */
      --blanket-tan: #e8d5b0;
      --blanket-cream: #f5ead6;
      --blanket-stripe1: #61aadb;
      --blanket-stripe2: #8b5eb9;
	  
      --inside-light: #fdf3e3;
      --inside-shadow: #e8d0a8;
      --text-main: #3a2810;
      --text-soft: #6b4c2a;
      --string-light: #ffe066;
      --pin-red: #cc3333; 
      --card-bg: #fffdf5;
      --card-border: #C0C0C0;
      --tag-bg: #add7ea;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Kalam', cursive;
      background-color: #b8cfe0;
      background-image: repeating-linear-gradient(
        180deg,
        #a8c4da 0px,
        #a8c4da 36px,
        #f2ede0 36px,
        #f2ede0 72px
      );
      background-attachment: fixed;
      color: var(--text-main);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* ===== FORT STRUCTURE ===== */
    .fort-wrapper {
      max-width: 900px;
      margin: 0 auto;
      position: relative;
    }

    /* Blanket roof draping over the top */
    .fort-roof {
      background:
        repeating-linear-gradient(
          90deg,
          var(--blanket-stripe2) 0px,
          var(--blanket-stripe2) 18px,
          var(--blanket-stripe1) 18px,
          var(--blanket-stripe1) 36px,
          var(--blanket-tan) 36px,
          var(--blanket-tan) 54px,
          var(--blanket-red) 54px,
          var(--blanket-red) 72px,
          var(--blanket-tan) 72px,
          var(--blanket-tan) 90px
        );
      height: 28px;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 4px 18px rgba(0,0,0,0.5);
    }

    /* The blanket drape hanging down on sides */
    .fort-body {
      background: var(--inside-light);
      background-image:
        radial-gradient(ellipse at 20% 0%, #F5F5F5 0%, transparent 50%),
        radial-gradient(ellipse at 80% 0%, #E0E0E0 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, #C0C0C0 0%, transparent 60%);
      border-left: 22px solid var(--fabric-warm);
      border-right: 22px solid var(--fabric-warm);
      border-image: repeating-linear-gradient(
        180deg,
        var(--blanket-stripe2) 0px,
        var(--blanket-stripe2) 14px,
        var(--blanket-stripe1) 14px,
        var(--blanket-stripe1) 28px,
        var(--blanket-tan) 28px,
        var(--blanket-tan) 42px,
        var(--blanket-red) 42px,
        var(--blanket-red) 56px,
        var(--blanket-tan) 56px,
        var(--blanket-tan) 70px
      ) 0 22;
      position: relative;
      padding: 0 16px 60px;
    }

    /* ===== STRING LIGHTS ===== */
    .lights-bar {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding: 0;
      gap: 0;
      position: sticky;
      top: 28px;
      z-index: 99;
      height: 52px;
      overflow: visible;
      background: transparent;
      margin-left: -16px;
      margin-right: -16px;
      padding-left: 16px;
      padding-right: 16px;
      pointer-events: none;
    }

    .light-bulb-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 1;
      flex: 1;
      max-width: 52px;
    }

    .light-wire-drop {
      width: 1px;
      background: #555;
      height: 10px;
    }

    .light-bulb {
      width: 14px;
      height: 18px;
      border-radius: 50% 50% 40% 40%;
      position: relative;
      animation: flicker 4s infinite ease-in-out;
    }

    .light-bulb::after {
      content: '';
      position: absolute;
      bottom: -3px;
      left: 50%;
      transform: translateX(-50%);
      width: 8px;
      height: 4px;
      background: #888;
      border-radius: 0 0 3px 3px;
    }

    .light-bulb.red    { background: #ffe8a0; box-shadow: 0 0 9px 4px #ffd04488; }
    .light-bulb.yellow { background: #fff0b0; box-shadow: 0 0 9px 4px #ffdd6688; }
    .light-bulb.green  { background: #fde89a; box-shadow: 0 0 9px 4px #ffc93388; }
    .light-bulb.blue   { background: #ffe9a8; box-shadow: 0 0 9px 4px #ffcf4488; }
    .light-bulb.pink   { background: #fff3b8; box-shadow: 0 0 9px 4px #ffe06688; }
    .light-bulb.orange { background: #ffe5a0; box-shadow: 0 0 9px 4px #ffbb3388; }

    @keyframes flicker {
      0%, 100% { opacity: 1; }
      92% { opacity: 1; }
      93% { opacity: 0.6; }
      94% { opacity: 1; }
      96% { opacity: 0.7; }
      97% { opacity: 1; }
    }

    .light-bulb:nth-child(2) { animation-delay: 1.3s; }
    .light-bulb:nth-child(3) { animation-delay: 2.7s; }

    /* ===== HEADER ===== */
    .fort-header {
      text-align: center;
      padding: 10px 10px 24px;
    }

    .fort-title {
      font-family: 'Patrick Hand', cursive;
      font-size: clamp(2.2rem, 8vw, 3.8rem);
      color: var(--text-main);
      line-height: 1.1;
      position: relative;
      display: inline-block;
    }

    .fort-title span {
      display: block;
      font-size: 0.45em;
      color: var(--text-soft);
      margin-top: 4px;
    }

    .fort-intro {
      max-width: 500px;
      margin: 14px auto 0;
      font-size: 1.05rem;
      color: var(--text-soft);
      line-height: 1.6;
      background: rgba(255,255,255,0.5);
      border: 1.5px dashed var(--card-border);
      border-radius: 10px;
      padding: 12px 16px;
    }

    /* ===== GRID ===== */
    .plush-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 22px;
      padding: 8px 4px 20px;
    }

    /* ===== PROFILE CARD ===== */
    .card {
      background: var(--card-bg);
      border: 2px solid var(--card-border);
      border-radius: 12px;
      padding: 16px;
      position: relative;
      box-shadow:
        3px 3px 0px var(--fabric-mid),
        6px 6px 0px rgba(0,0,0,0.08);
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .card:hover {
      transform: translateY(-3px) rotate(0.4deg);
      box-shadow:
        3px 6px 0px var(--fabric-mid),
        8px 10px 0px rgba(0,0,0,0.1);
    }

    /* little thumbtack in corner */
    .card::before {
      content: '📌';
      position: absolute;
      top: -10px;
      left: 12px;
      font-size: 1.1rem;
      filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
    }

    /* photo area — supports 1, 2, or 3 images */
    .card-photos {
      display: grid;
      gap: 5px;
      margin-bottom: 12px;
      border-radius: 8px;
      overflow: hidden;
    }

    /* 1 photo: full square */
    .card-photos.count-1 {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      aspect-ratio: 1 / 1;
    }

    /* 2 photos: side by side */
    .card-photos.count-2 {
      grid-template-columns: 1fr 1fr;
      aspect-ratio: 2 / 1;
    }

    /* 3 photos: one big left, two stacked right */
    .card-photos.count-3 {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      aspect-ratio: 1 / 1;
    }

    .card-photos.count-3 .photo-slot:first-child {
      grid-row: 1 / 3;
    }

    .photo-slot {
      background: #E0E0E0;
      border: 1.5px solid var(--inside-shadow);
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3.2rem;
      min-height: 80px;
    }

    .card-photos.count-1 .photo-slot {
      font-size: 4rem;
    }

    .photo-slot img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    .card-name {
      font-family: 'Patrick Hand', cursive;
      font-size: 1.3rem;
      color: var(--text-main);
      margin-bottom: 8px;
      line-height: 1.2;
    }

    .card-fields {
      display: flex;
      flex-direction: column;
      gap: 5px;
      font-size: 0.88rem;
      color: var(--text-soft);
    }

    .card-field {
      display: flex;
      gap: 6px;
      align-items: flex-start;
    }

    .field-label {
      background: var(--tag-bg);
      border: 1px solid var(--card-border);
      border-radius: 4px;
      padding: 1px 6px;
      font-size: 0.75rem;
      white-space: nowrap;
      color: var(--fabric-dark);
      flex-shrink: 0;
      margin-top: 1px;
      font-family: 'Patrick Hand', cursive;
    }

    .field-value {
      line-height: 1.4;
    }

    .field-value a {
      color: var(--blanket-stripe2);
      text-decoration: underline dotted;
    }

    .card-commentary {
      margin-top: 10px;
      padding: 8px 10px;
      background: rgba(200, 169, 126, 0.18);
      border-left: 3px solid var(--fabric-warm);
      border-radius: 0 6px 6px 0;
      font-size: 0.9rem;
      color: var(--text-main);
      font-style: italic;
      line-height: 1.5;
    }

    /* ===== SECTION DIVIDER ===== */
    .section-label {
      font-family: 'Patrick Hand', cursive;
      font-size: 1.15rem;
      color: var(--text-soft);
      text-align: center;
      margin: 28px 0 12px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .section-label::before,
    .section-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: repeating-linear-gradient(
        90deg,
        var(--card-border) 0px,
        var(--card-border) 6px,
        transparent 6px,
        transparent 12px
      );
    }

    /* ===== FOOTER ===== */
    .fort-footer {
      text-align: center;
      padding: 30px 10px 20px;
      color: var(--text-soft);
      font-size: 0.85rem;
      line-height: 1.8;
      border-top: 1.5px dashed var(--card-border);
      margin-top: 30px;
    }

    .fort-footer a {
      color: var(--blanket-stripe2);
    }


    /* ===== MOBILE ===== */
    @media (max-width: 500px) {
      .fort-body {
        border-left-width: 12px;
        border-right-width: 12px;
        padding: 0 8px 40px;
      }

      .plush-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }

      .card {
        padding: 10px;
      }

      .card-name {
        font-size: 1.05rem;
      }

      .card-fields {
        font-size: 0.8rem;
      }

      .card-commentary {
        font-size: 0.82rem;
      }
    }

    @media (max-width: 360px) {
      .plush-grid {
        grid-template-columns: 1fr;
      }
    }