:root 
{
  /* --colour1 to --colour5, the roles ( --accent-dark, --ink … ) and the
     neutrals ( --paper, --on-ink … ) are set in custom.css */

}

body
{
    display: grid;
    grid-gap: 0;

    /* the body font for everything that is not a <p> or a heading - list
       items, labels, numbers - which fell back to the browser's serif */
    font-family: "avenir-next-lt-pro", sans-serif;
}

h1, h2, h3, h4, .page-link, .footer-link, .nav-button, .piece-btn > span
{
    font-family: "monotype-grotesque", sans-serif;
    letter-spacing: 1px;
}

p
{
    font-family: "avenir-next-lt-pro", sans-serif;
    font-size: 17px;
    line-height: 30px;
    letter-spacing: 1px;
}

#page-content
{
    display: grid;
    padding: 32px 0;
}

.workspace
{
    padding: 32px 0;
}


.pattern-1
{
    background-image: url( '../img/pattern-1.png');
    background-size: cover;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* The feature strip ( home ) - from example 1: a dark band straight under
   the banner, up to three items side by side, each a big mark in the
   accent, a heading in tracked capitals and a line under it.

   Up to five items, each an icon, a heading, a line and a link, set on
   the Finishing touches step ( feature-strip.js ) - or, left alone, the
   site's pages after Home with "Find out more". */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.feature-strip
{
    display: grid;
    grid-template-columns: minmax( 0, 1200px );
    justify-content: center;

    padding: 56px 24px;
    box-sizing: border-box;

    background-color: var( --ink );
}

.feature-strip-inner
{
    display: grid;
    grid-template-columns: minmax( 0, 1fr );
    grid-gap: 32px;
}

@media( min-width: 768px )
{
    .feature-strip
    {
        padding: 72px 32px;
    }

    /* side by side - up to five on a desktop, wrapping to a second row
       on a tablet */
    .feature-strip-inner
    {
        grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
        grid-gap: 32px 40px;
    }
}

.feature-item
{
    display: grid;
    grid-template-columns: auto minmax( 0, 1fr );
    grid-gap: 20px;
    align-items: center;

    text-decoration: none;
}

/* - the mark: the page's icon ( Finishing touches ) - */

.feature-mark
{
    display: grid;
    place-items: center;

    width: 56px;
    height: 56px;

    font-size: 44px;
    line-height: 1;
    color: var( --accent-dark );

    transition: transform .33s cubic-bezier( .175, .885, .32, 1.275 );
}

/* an <i>, or the <svg> Font Awesome swaps it for */
.feature-mark :is( i, svg )
{
    width: 44px;
    height: 44px;
}

.feature-item:hover .feature-mark
{
    transform: scale( 1.08 );
}

@media( prefers-reduced-motion: reduce )
{
    .feature-item:hover .feature-mark
    {
        transform: none;
    }
}

/* - the words - */

.feature-words
{
    display: grid;
    grid-gap: 6px;
}

.feature-words h3
{
    margin: 0;

    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 1px;
    text-align: left;
    text-transform: uppercase;
    color: var( --accent-dark );
}

.feature-more
{
    font-size: 15px;
    letter-spacing: 1px;
    color: var( --on-ink );
}

/* the arrow rides on the last word - a non-breaking space before it, so
   it never drops onto a line of its own */
.feature-more::after
{
    content: "\00a0\00a0\2192";
    position: relative;
    left: 0;

    transition: left .25s ease;
}

.feature-more.is-plain::after
{
    content: none;
}

.feature-item:hover .feature-more::after
{
    left: 4px;
}

/* - four or five across: a smaller mark and heading, so the words keep
     their room - */

@media( min-width: 768px )
{
    .feature-strip-inner:has( > :nth-child( 4 ) )
    {
        grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) );
        grid-gap: 28px 28px;
    }

    .feature-strip-inner:has( > :nth-child( 4 ) ) .feature-item
    {
        grid-gap: 14px;
    }

    .feature-strip-inner:has( > :nth-child( 4 ) ) .feature-mark
    {
        width: 40px;
        height: 40px;

        font-size: 34px;
    }

    .feature-strip-inner:has( > :nth-child( 4 ) ) .feature-mark :is( i, svg )
    {
        width: 34px;
        height: 34px;
    }

    .feature-strip-inner:has( > :nth-child( 4 ) ) .feature-words h3
    {
        font-size: 16px;
    }

    .feature-strip-inner:has( > :nth-child( 4 ) ) .feature-more
    {
        font-size: 14px;
    }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* - Gallery CSS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#preview-container {
    position: fixed;

    display: grid;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.75);

    z-index: 99;
}

#preview-img {
    justify-self: center;
    align-self: center;
    max-width: 90vw;
    max-height: 80vh;
    border: 8px solid var( --paper );
    margin-top: 2vh;
    grid-row: 1;
    grid-column: 1;
}

.gallery-thmb {
    transition: opacity ease .2s, width ease .2s, box-shadow ease .2s;
    justify-self: center;
    align-self: center;
    width: 100%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.gallery-thmb:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    cursor: pointer;
    opacity: 0.5;
    width: 98%;
}

.gallery-arrow {
    color: var( --on-ink );
    font-size: 32px;
    grid-row: 1;
    grid-column: 1;
    transition: opacity .5s ease;
    align-self: end;
    margin: 32px;
    transition: all ease .2s;
}

@media (min-width: 768px) {
    .gallery-arrow {
        align-self: center;
    }
}

.gallery-arrow:hover {
    cursor: pointer;
    opacity: .5;
    transform: scale(0.8);
}

.gallery-close {
    color: var( --on-ink );
    font-size: 32px;
    grid-row: 1;
    grid-column: 1;
    transition: opacity .5s ease;
    align-self: start;
    justify-self: end;
    margin: 32px;
    transition: all ease .2s;
}

.gallery-close:hover {
    cursor: pointer;
    opacity: .5;
    transform: rotate(45deg) scale(0.8);
}

.gallery-right {
    justify-self: end;
}

.gallery-left 
{
    justify-self: start;
}

#gallery-txt 
{
    grid-row: 1;
    grid-column: 1;
    justify-self: center;
    align-self: end;
    z-index: 3;
    color: var( --on-ink );
    margin-bottom: calc(5vh - 16px);
}

/* - Masonry CSS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.simple-masonry
{
	position: relative;
}

.item
{
	position: absolute;

	width: 256px;

	left: 0;
	top: 0;

	background-color: var( --paper );

	transition: ease all 1s;
}












/* - Footer

   Example 2's layout: the page links ( every page, written by the build ),
   the contact details in up to three columns, the social icons, then the
   copyright line with the privacy link. On the dark of the scheme with
   the template's pattern, so the words are white whatever the colours;
   the icons and hovers take the accent as it reads on dark. */

.footer-container
{
    display: grid;
    grid-gap: 40px;

    padding: 64px 24px 0;

    background-color: var( --ink );
    background-image: url( '../img/pattern-1-m.png' );
    background-position: left top;
    background-size: cover;
    background-repeat: no-repeat;
}

@media( min-width: 992px )
{
    .footer-container
    {
        background-image: url( '../img/pattern-1.png' );
    }
}

.footer-container p,
.footer-container a
{
    color: var( --on-ink );
}

/* - the page links - */

.footer-links
{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 32px;
}

@media( min-width: 768px )
{
    .footer-links
    {
        flex-direction: row;
    }
}

.footer-link
{
    text-decoration: none;
    text-align: center;

    border-bottom: solid 2px transparent;

    transition: ease color .2s, border-color .2s;
}

.footer-link p
{
    margin: 0;

    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    color: inherit;
}

.footer-container .footer-link:hover
{
    color: var( --accent-dark );
}

/* the page you are on - marked by the script, the footer being shared */
.footer-container .active-footer-link
{
    border-bottom-color: currentColor;
}

/* - the contact details - */

.footer-contact
{
    display: grid;
    /* each column as wide as its words need - a long email address
       stays on one line where it can */
    grid-template-columns: repeat( auto-fit, minmax( min( 220px, 100% ), max-content ) );
    justify-content: center;
    grid-gap: 32px;
}

.footer-contact:not( :has( .footer-detail ) )
{
    display: none;
}

.footer-detail
{
    display: grid;
    grid-gap: 8px;
    align-content: start;
    justify-items: center;

    text-align: center;
}

.footer-detail h3,
.footer-detail p,
.bottom-bar p
{
    justify-self: center;

    text-align: center;
}

.footer-detail h3
{
    margin: 0;

    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var( --on-ink );
}

/* the icon - an <i>, or the <svg> Font Awesome swaps it for */
.footer-detail h3 :is( i, svg )
{
    margin-right: 6px;

    color: var( --accent-dark );
}

.footer-detail p
{
    margin: 0;

    overflow-wrap: break-word;
}

/* a small phone: a long address may break anywhere, rather than push the
   page sideways */
@media( max-width: 479px )
{
    .footer-detail p
    {
        overflow-wrap: anywhere;
    }
}

.footer-detail a
{
    text-decoration: none;

    transition: ease color .2s;
}

.footer-container .footer-detail a:hover
{
    color: var( --accent-dark );
}

/* - the social icons - */

.footer-socials
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.footer-social
{
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    font-size: 20px;
    text-decoration: none;

    border: solid 1px rgba( 255, 255, 255, .3 );
    border-radius: 50%;

    transition: ease color .2s, background-color .2s, border-color .2s;
}

.footer-container .footer-social:hover
{
    color: var( --on-accent-dark );

    background-color: var( --accent-dark );
    border-color: var( --accent-dark );
}

/* - the copyright line - */

.bottom-bar
{
    display: grid;
    justify-items: center;

    margin: 0 -24px;
    padding: 20px 24px;

    text-align: center;

    border-top: solid 1px rgba( 255, 255, 255, .15 );
}

.bottom-bar p
{
    margin: 0;

    font-size: 14px;
    line-height: 1.6;
    color: rgba( 255, 255, 255, .75 );
}

.bottom-bar a
{
    text-decoration: none;
    color: var( --on-ink );
}

.bottom-bar a:hover
{
    text-decoration: underline;
}