/* Memory Wall - A Free Design by Bryant Smith (bryantsmith.com)

   The page has three layers, and it helps to picture them in order:
     1. body  - the desk the scrapbook rests on (warm kraft colour)
     2. #page - the paper album itself
     3. .memory - each little card taped to the page

   Every colour used on the page is listed in the PALETTE section below.
   Change the values there and the whole page follows. */


/* ---- RESET: a small, tidy starting point ---- */

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


/* ---- PALETTE ----
   desk         #e3d3b8   warm kraft background
   paper        #f8f0e2   the album page
   card         #fffdf7   each memory card
   ink          #352c24   main text
   ink-soft     #5b4f42   body copy
   ink-meta     #7b6a58   small caption text
   line         #ddc9a8   hairline borders
   terracotta   #b5562f   primary accent
   teal         #356b64   secondary accent
   mustard      #f6e3a8   sticky-note tint
   tape         #e2c796   translucent washi tape
*/

body {
    background-color: #e3d3b8;
    background-image:
        radial-gradient(circle at 18% 12%, rgba(255, 252, 244, 0.55), transparent 42%),
        radial-gradient(circle at 82% 78%, rgba(168, 128, 78, 0.20), transparent 46%),
        repeating-linear-gradient(90deg, rgba(120, 86, 44, 0.04) 0 2px, transparent 2px 6px);
    color: #352c24;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
    line-height: 1.7;
    padding: 40px 16px;
}


/* ---- PAGE: the album sheet ---- */

#page {
    background-color: #f8f0e2;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(180, 150, 105, 0.055) 0 1px,
        transparent 1px 30px
    );
    border: 1px solid #ddc9a8;
    border-top: 6px solid #b5562f;
    box-shadow: 0 2px 4px rgba(60, 40, 15, 0.08), 0 18px 40px rgba(60, 40, 15, 0.14);
    margin: 0 auto;
    max-width: 940px;
    padding: 52px 46px 40px 46px;
}


/* ---- HEADER: kicker, title, tagline and menu ---- */

#masthead {
    border-bottom: 3px double #dcc9ab;
    margin-bottom: 34px;
    padding-bottom: 22px;
}

#masthead .kicker {
    color: #b5562f;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

#masthead h1 {
    color: #352c24;
    font-size: 46px;
    font-weight: normal;
    letter-spacing: -0.5px;
    line-height: 1.05;
}

#masthead .tagline {
    color: #7b6a58;
    font-size: 17px;
    font-style: italic;
    margin-top: 10px;
}


/* ---- MENU: the row of text links ---- */

#menu {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    margin-top: 22px;
    text-transform: uppercase;
}

#menu a,
#menu a:visited {
    border-bottom: 2px solid transparent;
    color: #5b4f42;
    margin-right: 20px;
    padding-bottom: 3px;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

#menu a:hover,
#menu a:focus {
    border-bottom-color: #b5562f;
    color: #b5562f;
}


/* ---- INTRO: the greeting, plus a FLOATED mini polaroid ---- */

#intro {
    margin-bottom: 42px;
}

#intro p {
    color: #5b4f42;
    margin-bottom: 18px;
}

#intro .lead {
    color: #4a3f34;
    font-size: 19px;
    line-height: 1.65;
}

/* The little photo floats to the right; the text wraps around it.
   #intro::after clears the float so the section closes cleanly. */
.polaroid-mini {
    background: #fffdf7;
    border: 1px solid #e6d7c1;
    box-shadow: 0 6px 14px rgba(90, 62, 30, 0.16);
    float: right;
    margin: 4px 0 14px 24px;
    padding: 8px 8px 4px 8px;
    transform: rotate(2deg);
    width: 168px;
}

.polaroid-mini .photo {
    height: 118px;
    margin-bottom: 8px;
}

.polaroid-mini p {
    color: #7b6a58;
    font-size: 13px;
    font-style: italic;
    margin: 0;
    text-align: center;
}

#intro::after {
    clear: both;
    content: "";
    display: table;
}

/* The friendly "how to use" note, in a dashed box */

.howto {
    background: #fdf6e9;
    border: 1px dashed #d3bfa1;
    margin-top: 6px;
    padding: 18px 20px;
}

.howto strong {
    color: #b5562f;
    display: block;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.howto p {
    margin-bottom: 0;
}


/* ---- SECTION TITLE ---- */

.wall-title {
    border-bottom: 1px solid #e6d8c1;
    color: #352c24;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2.5px;
    margin-bottom: 18px;
    padding-bottom: 10px;
    text-transform: uppercase;
}

.wall-title::before {
    background: #b5562f;
    content: "";
    display: inline-block;
    height: 3px;
    margin-right: 10px;
    vertical-align: middle;
    width: 22px;
}


/* ---- THE WALL: a masonry of cards ----
   CSS columns are what make the masonry effect. Three columns on a
   wide screen; each card says "break-inside: avoid" so a card is never
   split across two columns. Because the photos are different heights,
   the columns settle at different lengths - exactly like a scrapbook. */

.wall {
    column-count: 3;
    column-gap: 26px;
}

.memory {
    background: #fffdf7;
    border: 1px solid #ecdfc9;
    border-bottom: 3px solid #e3d3bb;
    box-shadow: 0 1px 2px rgba(80, 58, 32, 0.08), 0 8px 18px rgba(80, 58, 32, 0.10);
    break-inside: avoid;
    display: block;
    margin: 0 0 26px 0;
    padding: 12px 12px 8px 12px;
    position: relative;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Hovering a card straightens it and lifts it slightly off the page. */
.memory:hover {
    box-shadow: 0 3px 6px rgba(80, 58, 32, 0.12), 0 16px 30px rgba(80, 58, 32, 0.20);
    transform: rotate(0deg) translateY(-4px);
    z-index: 2;
}

/* Small paper tilts, so the wall feels hand-made rather than printed. */
.tilt-l { transform: rotate(-1.6deg); }
.tilt-r { transform: rotate(1.5deg); }

.memory .note {
    color: #352c24;
    font-size: 17px;
    font-style: italic;
    line-height: 1.55;
    margin-bottom: 10px;
}

.memory .meta {
    color: #7b6a58;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}


/* ---- PHOTOS (CSS gradient placeholders) ----
   Every photo on this page is a CSS gradient, so the template needs no
   image files at all. To use a real photograph instead, replace the
   gradient on any rule below with:

       background: url("my-photo.jpg") center / cover no-repeat;

   and keep the height class (.short, .square or .tall) you like. */

.photo {
    border: 1px solid rgba(80, 58, 32, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    display: block;
    height: 150px;
    margin-bottom: 12px;
}

.photo.short  { height: 104px; }
.photo.square { height: 150px; }
.photo.tall   { height: 216px; }

.g-sky     { background: linear-gradient(180deg, #a9cbe0 0%, #e7c98a 58%, #d99a5c 100%); }
.g-kitchen { background: linear-gradient(150deg, #f0c47a 0%, #cf7f3c 60%, #8f4a25 100%); }
.g-garden  { background: linear-gradient(140deg, #b9c56a 0%, #6f8f45 60%, #a5482f 100%); }
.g-rain    { background: linear-gradient(160deg, #8fa4ad 0%, #546a72 55%, #2f3d44 100%); }
.g-sand    { background: linear-gradient(150deg, #efe0bd 0%, #d8c08a 50%, #7fa9a1 100%); }
.g-pancake { background: linear-gradient(140deg, #f4d18a 0%, #d99a3d 55%, #a9642b 100%); }
.g-road    { background: linear-gradient(160deg, #e39a6a 0%, #a5657c 52%, #4b3f66 100%); }
.g-glass   { background: linear-gradient(150deg, #bfe0d6 0%, #79b3a8 55%, #3f6f6a 100%); }
.g-night   { background: linear-gradient(160deg, #2e3a58 0%, #41476b 46%, #c98a3d 100%); }
.g-harbour { background: linear-gradient(150deg, #bcd6e0 0%, #e6b26a 60%, #b5562f 100%); }


/* ---- TAPE AND PINS ----
   ::after is a strip of washi tape across the top of a card.
   A card with class "pinned" gets a round drawing pin instead.
   ::before is unused here, but could hold a small label if you like. */

.memory::after {
    background: rgba(226, 199, 150, 0.72);
    border-left: 1px dashed rgba(255, 255, 255, 0.55);
    border-right: 1px dashed rgba(255, 255, 255, 0.55);
    content: "";
    height: 22px;
    left: 50%;
    position: absolute;
    top: -11px;
    transform: translateX(-50%) rotate(-2deg);
    width: 76px;
}

.memory.pinned::after {
    background: radial-gradient(circle at 35% 30%, #d9704a, #a8442a 65%);
    border: none;
    border-radius: 50%;
    box-shadow: 0 3px 5px rgba(80, 40, 20, 0.35);
    height: 16px;
    top: -8px;
    transform: translateX(-50%);
    width: 16px;
}


/* ---- QUOTE AND STICKY CARDS ---- */

.memory.quote {
    border-left: 4px solid #b5562f;
}

.memory.quote .note {
    font-size: 18px;
}

.memory.sticky {
    background: #f6e3a8;
    border-color: #e3cf8d;
    border-bottom-color: #d8bf74;
}

.memory.sticky .note {
    color: #6c531d;
    font-style: normal;
}


/* ---- FOOTER: the required credit link ---- */

#footer {
    border-top: 3px double #dcc9ab;
    color: #7b6a58;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
    margin-top: 40px;
    padding-top: 22px;
    text-align: center;
    text-transform: uppercase;
}

#footer a,
#footer a:visited {
    color: #b5562f;
    text-decoration: none;
}

#footer a:hover,
#footer a:focus {
    text-decoration: underline;
}


/* ---- MEDIUM SCREENS: two columns instead of three ---- */

@media (max-width: 820px) {
    #page {
        padding: 40px 28px 32px 28px;
    }

    .wall {
        column-count: 2;
    }
}


/* ---- SMALL SCREENS: one column, smaller type ---- */

@media (max-width: 640px) {
    body {
        padding: 20px 10px;
    }

    #page {
        border-top-width: 5px;
        padding: 30px 20px 24px 20px;
    }

    #masthead h1 {
        font-size: 34px;
    }

    #menu a {
        display: inline-block;
        margin-bottom: 8px;
    }

    .polaroid-mini {
        float: none;
        margin: 0 auto 18px auto;
    }

    #intro::after {
        content: none;
    }

    .wall {
        column-count: 1;
    }

    .memory .note {
        font-size: 16px;
    }
}


/* ---- PRINT: drop the desk, the shadows and the tilts ---- */

@media print {
    body {
        background: #ffffff;
        padding: 0;
    }

    #page {
        border-top: none;
        box-shadow: none;
        max-width: 100%;
        padding: 0;
    }

    #menu {
        display: none;
    }

    .wall {
        column-count: 2;
    }

    .memory {
        border: 1px solid #dddddd;
        box-shadow: none;
        transform: none;
    }

    .memory::after {
        display: none;
    }
}