/* ________________________________________________________
    > website:              mrsginger.nl/
    > theme:                landing
    > page:                 responsive.css
    > designed by:          ladyginger
    > please do NOT remove this credit!
    
    > this design was handmade with lots of frustration, trial
      and errors, and it would be appreciated if you didn't 
      steal the code!
   ________________________________________________________ */
   
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior:        auto !important;
    transition-duration:    .01ms !important;
    animation-duration:     .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 480px) {
  .landing {
    width:                  calc(100% - 12px);
    height:                 calc(100vh - 12px);
    margin:                 6px auto;  }

  .landing-header {
    left:                   15px;
    right:                  15px;
    justify-content:        center;  }

  .logo {
    font-size:              27px;  }

  .header-socials {
    width:                  100%;
    justify-content:        center; }

  .home-slide {
    padding-top:            110px; }

  .portrait-area {
    width:                  225px; }

  .portrait-frame {
    width:                  225px;
    height:                 285px;  }

  .intro h1 {
    font-size:              52px; }

  .intro-script {
    font-size:              18px; }

  .circle-nav {
    bottom:                 58px;
    gap:                    6px;  }

  .circle-button {
    width:                  46px;
    height:                 46px; }

  .utility-nav {
    gap:                    4px; }

  .utility-button {
    gap:                    4px;
    padding:                7px 8px;
    font-size:              7px;
    letter-spacing:         1px;  }

  .utility-separator {
    font-size:              6px;  }

  .content-slide {
    padding-left:           22px;
    padding-right:          22px; }

  .slide-content h2 {
    font-size:              54px; }

  .update-body {
    font-size:              9px;  }

  .update-body h4 {
    font-size:              15px;  }

  .update-body .gallery-grid {
    grid-template-columns:  repeat(2, 1fr); }

  .update-navigation {
    gap:                    8px;  }

  .update-nav-button {
    padding:                8px 9px;
    font-size:              7px;  }

  .update-counter {
    font-size:              7px;  }
    
  .links-two-column,
  .guestbook-layout {
    gap:                    20px;  }

  .guestbook-field textarea {
    min-height:             80px;  }

  .guestbook-entry {
    width:                  94%;  }

  .contact-card {
    padding:                15px;  }

  .contact-field textarea {
    min-height:             120px;  }

  .contact-submit {
    width:                  100%;  }

  .links-slide,
  .contact-slide {
    padding:                100px 18px 68px;  }

  .links-slide .slide-heading,
  .contact-slide .slide-heading {
    margin-bottom:          17px;  }

  .links-slide .slide-heading h2,
  .contact-slide .slide-heading h2 {
    font-size:              52px;  }

  .links-slide .slide-heading p,
  .contact-slide .slide-heading p {
    font-size:              8px;
    margin-top:             10px;  }

  .links-slide .my-button-section {
    margin-bottom:          15px;  }

  .contact-slide .contact-layout {
    gap:                    12px;  }

  .contact-slide .contact-field {
    margin-bottom:          7px;  }

  .contact-slide .contact-field textarea {
    min-height:             60px;  }

  .contact-slide .cbox-wrapper iframe {
    height:                 120px;  }

  .contact-slide .cbox-wrapper {
    min-height:             120px;  }
}

@media (max-width: 560px) {
  .guestbook-form-row {
    grid-template-columns:  1fr;  }

  .guestbook-link-input-row {
    grid-template-columns:  1fr;  }

  .guestbook-list-card .guestbook-card-heading {
    justify-content:        flex-end;  }

  .guestbook-entry,
  .guestbook-entry.entry-right {
    width:                  100%;  }

  .guestbook-entry-message {
    width:                  100%;
    padding:                18px 12px 11px;  }

  .guestbook-entry-message::before {
    width:                  24px;
    height:                 24px;
    font-size:              10px;  }
}

@media (max-width: 800px) {
  .landing {
    width:                  calc(100% - 20px);
    max-width:              none;
    height:                 calc(100vh - 20px);
    margin:                 10px auto;  }

  .landing-header {
    left:                   20px;
    right:                  20px;
    height:                 auto;
    min-height:             72px;
    flex-wrap:              wrap;
    padding:                10px 0;
    gap:                    7px;  }

  .header-tagline {
    width:                  100%;
    order:                  3;
    padding-bottom:         3px;
    text-align:             center;  }

  .header-socials {
    gap:                    5px;  }

  .header-socials a {
    width:                  25px;
    height:                 25px;
    font-size:              8px;  }

  .home-slide {
    padding-top:            105px;
    padding-bottom:         100px;  }

  .landing-main {
    height:                 100%;
    display:                flex;
    flex-direction:         column;
    gap:                    35px;
    padding:                35px 30px 90px;
    text-align:             center;
    overflow-y:             auto;  }

  .portrait-area {
    width:                  245px;  }

  .portrait-frame {
    width:                  245px;
    height:                 305px;  }

  .intro {
    max-width:              500px;  }

  .intro h1 {
    font-size:              58px; }

  .intro p {
    margin-left:            auto;
    margin-right:           auto;  }

  .intro-note {
    justify-content:        center;  }

  .circle-nav {
    position:               absolute;
    z-index:                300;
    top:                    auto;
    right:                  auto;
    bottom:                 58px;
    left:                   50%;
    flex-direction:         row;
    gap:                    8px;
    transform:              translateX(-50%);  }

  .circle-button {
    width:                  52px;
    height:                 52px;  }

  .circle-icon {
    font-size:              13px;  }

  .circle-tooltip {
    display:                none;  }

  .circle-button:hover {
    transform:              translateY(-3px); }

  .utility-nav {
    left:                   10px;
    right:                  10px;
    bottom:                 10px;
    padding:                7px 5px;
    gap:                    5px;
    background:             rgba(248,244,240,.96);
    border:                 1px solid rgba(116,107,104,.14);  }

  .utility-button {
    padding:                8px 10px;
    font-size:              8px;  }

  .landing-footer {
    display:                none;  }

  .links-slide,
  .contact-slide {
    padding:                82px 22px 82px; }

  .links-slide .slide-inner,
  .contact-slide .slide-inner {
    overflow-y:             auto;
    overflow-x:             hidden;  }

  .links-slide .slide-content,
  .contact-slide .slide-content {
    padding:                0 0 110px;
    max-height:             none;
    overflow:               visible;  }

  .links-slide .slide-heading,
  .contact-slide .slide-heading {
    margin-bottom: 12px;
  }

  .links-slide .slide-heading p,
  .contact-slide .slide-heading p {
    margin-top: 8px;
    font-size: 9px;
    line-height: 1.55;
  }

  .links-section { padding: 12px; }
  .links-label {
    margin-bottom: 7px;
    font-size: 10px;
  }

  .my-button-section { margin-bottom: 7px; }

  .copy-button {
    font-size: 6px;
    padding: 3px 6px;
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .contact-card { padding: 12px; }
  .contact-field { margin-bottom: 7px; }
  .contact-field input {
        height: 32px;
        padding: 7px 9px;
  }

  .contact-field textarea { min-height: 72px; }
  .contact-submit { padding: 8px 12px; }
  .cbox-wrapper { min-height: 150px; }
  .cbox-wrapper iframe { height: 150px; }
  .content-slide {
    padding:
            90px
            30px
            85px;
  }

  .slide-inner {
    overflow-y: auto;
  }

  .slide-content {
    padding-top: 45px;
    padding-bottom: 100px;
  }

  .slide-content h2 {
    font-size: 62px;
  }

  .update-body .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .links-section {
    padding:                15px;
  }
  
  .links-two-column,
  .guestbook-layout {
    grid-template-columns:  1fr;
    gap:                    24px;
  }

  .links-column-left,
  .links-column-right {
    gap:                    18px;
  }

  .guestbook-entries {
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-card {
    padding: 18px;
  }

  .chat-card {
    min-height: auto;
  }

    .links-slide,
    .contact-slide {
        padding: 90px 25px 75px;
    }

    .links-slide .slide-inner,
    .contact-slide .slide-inner {
        display: block;
    }

    .links-slide .slide-content,
    .contact-slide .slide-content {
        max-height: none;
    }

    .contact-slide .contact-layout {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .contact-slide .cbox-wrapper iframe {
        height: 155px;
    }

    .contact-slide .cbox-wrapper {
        min-height: 155px;
    }
    .guestbook-content {
        display: block;
        max-width: 100%;
    }

    .guestbook-content > .guestbook-layout {
        display: grid;

        grid-template-columns: 1fr;
        gap: 24px;
    }

    .guestbook-form-card,
    .guestbook-list-card {
        width: 100%;
    }

    .guestbook-list-card .guestbook-card-heading {
        justify-content: flex-end;
        text-align: right;
    }

    .guestbook-entries {
        max-height: none;
        gap: 18px;
        padding: 3px 3px 12px;
    }

    .guestbook-entry,
    .guestbook-entry.entry-right {
        width: 96%;

        grid-template-columns:
            90px
            minmax(0, 1fr);

        gap: 10px;

        padding: 5px 0;
    }

    .guestbook-avatar {
        width: 76px;
        height: 76px;
        flex-basis: 76px;

        max-width: 120px;
        max-height: 120px;
    }

    .guestbook-avatar img {
        max-width: 120px;
        max-height: 120px;
    }

    .guestbook-entry-name {
        font-size: 22px;
    }

    .guestbook-entry-message {
        min-height: 0;
        padding: 19px 13px 12px;
        font-size: 8px;
        line-height: 1.7;
    }
    .content-slide[data-slide="guestbook"] .slide-inner {
        overflow-y: auto;
    }

    .guestbook-content {
        height: auto;
        overflow: visible;
    }

    .guestbook-layout {
        height: auto;
    }

    .guestbook-form-card,
    .guestbook-list-card {
        height: auto;
        overflow: visible;
    }

    .guestbook-entries {
        max-height: 520px;
    }
    .guestbook-content > .guestbook-title {
        color: var(--dark);
        font-family: var(--font-display);
        font-size: 62px;
        font-weight: 400;
        line-height: .85;
        letter-spacing: 2px;
        margin-bottom: 8px;
    }

    .guestbook-avatar {
        width: 75px;
        height: 75px;
        max-width: 75px;
        max-height: 75px;
        flex-basis: 75px;
    }

    .guestbook-avatar img {
        max-width: 75px;
        max-height: 75px;
    }

    .guestbook-default-avatar {
        font-size: 22px;
    }

    .guestbook-entry-message {
        text-align: left;
        text-indent: 0;
        padding: 12px 14px;
    }
    .guestbook-owner-reply {
        margin-top: 7px;
    }

    .guestbook-owner-reply-message {
        padding: 9px 12px;
    }
}


@media (min-width: 801px) {
    .guestbook-content {
        align-items: start;
    }
    .guestbook-content > .guestbook-layout {
        display: contents;
    }
    .guestbook-form-card {
        grid-column: 1;
        grid-row: 2;
    }
    .guestbook-list-card {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
    .guestbook-list-card .guestbook-card-heading {
        text-align: right;
        margin-bottom: 10px;
    }
    .guestbook-entry {
        width: 96%;
        grid-template-columns:
            105px
            minmax(0, 1fr);
        gap: 13px;
        padding: 6px 0;
        align-items: start;
    }
    .guestbook-entry-details {
        margin-top: 6px;
    }
    .guestbook-entry-message {
        height: auto;
    }
    .guestbook-entry-date {
        top: -1px;
        right: 10px;
    }
    .guestbook-entry-message::before {
        top: -8px;
        right: 9px;
        width: 26px;
        height: 26px;
        font-size: 11px;
    }

    .content-slide[data-slide="guestbook"] .slide-content {
        height: 100%;
        padding-top: 38px;
        padding-bottom: 92px;
    }
    .guestbook-content {
        display: grid;
        grid-template-columns: minmax(350px, 0.72fr) minmax(0, 1.28fr);
        column-gap: 48px;
    }
    
    .guestbook-layout {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(350px, .72fr) minmax(0, 1.28fr);
        gap: 48px;
        min-height: 0;
        height: 100%;
        align-items: start;
    }
    .guestbook-form-card {
        min-width: 0;
        height: 100%;
        overflow-y: auto;
        padding-right: 7px;
        scrollbar-width: thin;
        scrollbar-color: var(--pink) transparent;
    }
    .guestbook-form-card .guestbook-card-heading {
        margin-bottom: 14px;
    }
    .guestbook-field {
        margin-bottom: 10px;
    }
    .guestbook-field input,
    .guestbook-field textarea,
    .guestbook-link-input-row input {
        background: rgba(255,255,255,.48);
        border-color: rgba(116,107,104,.16);
    }
    .guestbook-field textarea {
        min-height: 84px;
        resize: none;
    }
    .guestbook-links-form {
        margin: 10px 0 12px;
        padding: 10px;
    }
    .guestbook-link-input-row {
        grid-template-columns: 105px minmax(0, 1fr);
    }
    .guestbook-list-card {
        min-width: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .guestbook-list-card .guestbook-card-heading {
        flex: 0 0 auto;
        justify-content: flex-start;
        margin: 0 0 8px;
    }
    .guestbook-entries {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        scrollbar-width: thin;
        scrollbar-color: var(--pink) transparent;
    }
    .guestbook-entry,
    .guestbook-entry.entry-right {
        position: relative;
        width: 100%;
        display: grid;
        grid-template-columns: 125px minmax(0, 1fr);
        align-items: center;
        align-self: stretch;
        background: transparent;
        border: 0;
    }
    .guestbook-entry.entry-right {
        grid-template-columns: minmax(0, 1fr) 125px;
    }
    .guestbook-profile,
    .guestbook-entry.entry-right .guestbook-profile {
        grid-column: auto;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
    }
    .guestbook-entry.entry-right .guestbook-profile {
        grid-column: 2;
    }
    .guestbook-message-wrap,
    .guestbook-entry.entry-right .guestbook-message-wrap {
        grid-column: auto;
        grid-row: 1;
        min-width: 0;
    }
    .guestbook-entry.entry-right .guestbook-message-wrap {
        grid-column: 1;
    }
    .guestbook-avatar {
        border-radius: 50%;
    }
    .guestbook-profile-info {
        width: 100%;
    }
    .guestbook-entry-name {
        margin: 0;
        color: var(--text);
        font-family: var(--font-main);
        font-size: 9px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: .3px;
    }
    .guestbook-entry-name a {
        color: inherit;
    }
    .guestbook-entry-details {
        display: flex;
        flex-direction: column;
        gap: 2px;
        width: fit-content;
        margin: 5px auto 0;
        color: var(--text);
        font-family: var(--font-main);
        font-size: 7px;
        line-height: 1.35;
    }
    .guestbook-entry-details i {
        color: var(--pink);
        font-size: 6px;
    }
    .guestbook-entry-links {
        display: flex;
        justify-content: center;
        gap: 5px;
    }
    .guestbook-entry-link {
        border: 1px solid rgba(116,107,104,.17);
        border-radius: 4px;
        background: #fff;
        font-size: 8px;
    }
    .guestbook-entry-message {
        position: relative;
        width: 100%;
        border: 1px solid rgba(116,107,104,.14);
        border-radius: 12px;
        font-size: 9px;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
    }
    .guestbook-entry:nth-child(even) .guestbook-entry-message {
        background: #f1e7ed;
    }
    .guestbook-entry-date {
        position: static;
        display: block;
        margin: 0 0 5px;
        font-size: 6px;
        text-align: right;
        letter-spacing: .7px;
    }
    .guestbook-entry-message::before {
        content: none;
    }
    .guestbook-inline-emoji {
        width: 16px;
        height: 16px;
    }
    .guestbook-status {
        min-height: 22px;
        margin-top: 8px;
        font-size: 8px;
        font-weight: 600;
    }
    .form-submit {
        position: relative;
        z-index: 2;
        pointer-events: auto;
    }

    .content-slide[data-slide="guestbook"] {
        padding: 72px 75px 90px;
    }
    .content-slide[data-slide="guestbook"] .slide-inner {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        overflow: hidden;
    }
    .content-slide[data-slide="guestbook"] .slide-content {
        width: 100%;
        max-width: 1180px;
        max-height: 100%;
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
    }
    .guestbook-content {
        height: 100%;
        max-width: none;
        grid-template-rows: auto minmax(0, 1fr);
        row-gap: 10px;
    }
    .guestbook-content > .guestbook-title {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
        color: var(--dark);
        font-family: var(--font-display);
        font-size: clamp(58px, 5.2vw, 76px);
        font-weight: 400;
        line-height: .85;
        letter-spacing: 2px;
    }
    .guestbook-content > .guestbook-intro {
        grid-column: 1;
        grid-row: 1;
        align-self: end;
        margin: 0;
        padding-top: 82px;
        max-width: 500px;
    }
    .guestbook-layout {
        grid-row: 2;
    }
    .guestbook-entries {
        gap: 3px;
        padding: 2px 12px 6px 2px;
    }
    .guestbook-entry,
    .guestbook-entry.entry-right {
        gap: 12px;
        padding: 1px 0;
    }
    .guestbook-avatar {
        width: 75px;
        height: 75px;
        max-width: 75px;
        max-height: 75px;
        flex-basis: 75px;
    }
    .guestbook-avatar img {
        width: 100%;
        height: 100%;
        max-width: 75px;
        max-height: 75px;
        object-fit: cover;
        border-radius: 50%;
    }
    .guestbook-default-avatar {
        font-size: 22px;
        line-height: 1;
    }
    .guestbook-profile-info {
        margin-top: 4px;
    }
    .guestbook-entry-links {
        margin-top: 5px;
    }
    .guestbook-entry-link {
        width: 25px;
        height: 25px;
        color: var(--gb-accent, var(--mauve));
        border-color: color-mix(in srgb, var(--gb-accent, var(--mauve)) 28%, white);
    }
    .guestbook-entry-message {
        min-height: 70px;
        padding: 12px 16px;
        color: var(--text);
        text-align: left;
        text-indent: 0;
        line-height: 1.65;
    }
    .guestbook-entry-date {
        color: var(--gb-accent, var(--sage-dark));
    }
    .contact-slide .contact-card:first-child {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
    }

    .contact-slide .contact-card:first-child .contact-card-heading {
        margin-bottom: 14px;
        color: var(--sage-dark);
        font-family: var(--font-main);
        font-size: 7px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 3px;
    }

    .contact-slide .contact-card:first-child .contact-card-heading i {
        color: var(--mauve);
        font-size: 8px;
    }

    .contact-slide .contact-field {
        margin-bottom: 10px;
    }

    .contact-slide .contact-field label {
        display: block;
        margin-bottom: 5px;
        color: var(--sage-dark);
        font-family: var(--font-main);
        font-size: 7px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .contact-slide .contact-field input,
    .contact-slide .contact-field textarea {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid rgba(116,107,104,.18);
        border-radius: 3px;
        background: rgba(255,255,255,.35);
        color: var(--dark);
        font-family: var(--font-main);
        font-size: 9px;
        padding: 8px 9px;
        outline: none;
        box-shadow: none;
    }

    .contact-slide .contact-field input:focus,
    .contact-slide .contact-field textarea:focus {
        border-color: var(--mauve);
        box-shadow: 0 0 0 2px rgba(190,151,166,.10);
    }

    .contact-slide .contact-field textarea {
        min-height: 105px;
        resize: vertical;
    }

    .contact-slide .contact-submit {
        margin-top: 3px;
        border: 1px solid var(--mauve);
        border-radius: 0;
        background: var(--mauve);
        color: var(--cream);
        padding: 7px 11px;
        font-family: var(--font-main);
        font-size: 7px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        cursor: pointer;
        transition: background .2s ease, color .2s ease;
    }

    .contact-slide .contact-submit:hover {
        background: transparent;
        color: var(--mauve);
    }

    .contact-slide .contact-status {
        min-height: 18px;
        margin: 8px 0 0;
        color: var(--sage-dark);
        font-family: var(--font-main);
        font-size: 8px;
        line-height: 1.5;
    }
}



/* =========================================================
   MOBILE REFINEMENTS — consistent forms, readable guestbook,
   and navigation kept clear of slide text.
   ========================================================= */
@media (max-width: 800px) {
  /* Stack the two navigation rows: slide buttons first, circle links below. */
  .utility-nav {
    bottom: 66px;
    left: 8px;
    right: 8px;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .circle-nav {
    bottom: 8px;
    gap: 7px;
    max-width: calc(100% - 16px);
    justify-content: center;
  }

  .circle-button {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
  }

  .home-slide {
    padding-bottom: 120px;
  }

  .landing-main {
    padding-bottom: 125px;
  }

  /* Preserve the contact form's desktop styling while stacking cards. */
  .contact-slide .contact-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  .contact-slide .contact-card,
  .contact-slide .contact-card:first-child {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .contact-slide .contact-field {
    margin-bottom: 10px;
  }

  .contact-slide .contact-field input,
  .contact-slide .contact-field textarea {
    height: auto;
    min-height: 0;
    padding: 8px 9px;
    font-size: 9px;
    border: 1px solid rgba(116,107,104,.18);
    border-radius: 3px;
    background: rgba(255,255,255,.35);
  }

  .contact-slide .contact-field textarea {
    min-height: 92px;
    resize: vertical;
  }

  .contact-slide .contact-submit {
    width: auto;
    padding: 7px 11px;
  }

  .contact-slide .cbox-wrapper {
    min-height: 220px;
  }

  .contact-slide .cbox-wrapper iframe {
    height: 220px;
  }

  /* Guestbook cards and messages get breathing room on narrow screens. */
  .guestbook-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
    align-items: stretch;
  }

  .guestbook-form-card,
  .guestbook-list-card {
    min-width: 0;
    width: 100%;
    height: auto;
    overflow: visible;
    padding: 14px;
  }

  .guestbook-entries {
    max-height: none;
    overflow: visible;
    gap: 14px;
    padding: 4px 0;
  }

  .guestbook-entry,
  .guestbook-entry.entry-right {
    width: 100%;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 8px 0;
  }

  .guestbook-entry.entry-right {
    grid-template-columns: minmax(0, 1fr) 58px;
  }

  .guestbook-profile,
  .guestbook-entry.entry-right .guestbook-profile {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    align-items: center;
  }

  .guestbook-entry.entry-right .guestbook-profile {
    grid-column: 2;
  }

  .guestbook-message-wrap,
  .guestbook-entry.entry-right .guestbook-message-wrap {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .guestbook-entry.entry-right .guestbook-message-wrap {
    grid-column: 1;
  }

  .guestbook-avatar {
    width: 48px;
    height: 48px;
    max-width: 48px;
    max-height: 48px;
    flex-basis: 48px;
  }

  .guestbook-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .guestbook-entry-name {
    font-size: 10px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .guestbook-entry-details {
    font-size: 8px;
    line-height: 1.45;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .guestbook-entry-links {
    flex-wrap: wrap;
    gap: 4px;
  }

  .guestbook-entry-link {
    width: 23px;
    height: 23px;
    font-size: 9px;
  }

  .guestbook-entry-message {
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 12px 13px;
    font-size: 10px;
    line-height: 1.65;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  .guestbook-entry-date {
    margin: 0 0 5px;
    font-size: 7px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .guestbook-entry-message::before {
    content: none;
  }
}

@media (max-width: 480px) {
  .utility-nav {
    bottom: 62px;
    padding: 6px 4px;
  }

  .utility-button {
    padding: 7px 6px;
    font-size: 7px;
  }

  .circle-nav {
    bottom: 7px;
    gap: 5px;
  }

  .circle-button {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
  }

  .guestbook-entry,
  .guestbook-entry.entry-right {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
  }

  .guestbook-entry.entry-right {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .guestbook-avatar {
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
    flex-basis: 40px;
  }
}


/* CONTACT MOBILE WIDTH FIX — keep both cards within the slide like the guestbook. */
@media (max-width: 800px) {
  .contact-slide .slide-inner,
  .contact-slide .slide-content,
  .contact-slide .contact-layout,
  .contact-slide .contact-card,
  .contact-slide #contact-form {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .contact-slide .slide-inner {
    padding-left: 14px;
    padding-right: 14px;
  }

  .contact-slide .contact-content {
    padding-left: 0;
    padding-right: 0;
  }

  .contact-slide .contact-field,
  .contact-slide .contact-field input,
  .contact-slide .contact-field textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .contact-slide .contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-slide .contact-card {
    overflow-wrap: anywhere;
  }
}