/* Main Configuration */
@layer configuration {
*,*::before,*::after {
    box-sizing      : border-box;
    padding         : 0;
    margin          : 0;
    background      : none;
    text-decoration : none;
    outline         : none;
    font-family     : inherit;
    font-size       : inherit;
    line-height     : inherit;
    font-weight     : inherit;
    color           : inherit;

    /* Disable double tap to zoom */
    touch-action : manipulation;

    /* Fix the antialias when needed */
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
    font-feature-settings   : "kern", "liga", "clig", "calt";

    /* Global Transitions */
    transition-delay           : 0ms;
    transition-duration        : 150ms;
    transition-property        : none;
    transition-timing-function : ease-out ;
}
}
@layer configuration {

@font-face {
    font-family  : "FontSans";
    src          : url('fonts/TeXGyreHeros-Bold.woff2') format('woff2');
    font-style   : normal;
    font-weight  : 400;
    font-display : swap;
}

@font-face {
    font-family  : 'FontSerif';
    src          : url('fonts/crimson-text.woff2') format('woff2');
    font-weight  : 400;
    font-display : swap;
    font-style   : normal;
}

:root {
    
    /* Colors */
    --background : #EEEEEE;
    --text       : #030505;
    --accent     : #FF5760;
    --text-alt   : #FF6666;

    /* Font Settings */
    --font-sans   : FontSans, Arial, Helvetica, sans-serif;
    --font-serif  : FontSerif,Georgia, "Times New Roman", Times, serif;
    --font-mono   : Courier New, Courier, monospace;
    --font-size   : 16px;
    --font-height : 18px;
    --font-weight : 400;

    --mono : 400 14px/16px var(--font-mono);

    --sans  : 400 16px/18px var(--font-sans);
    --serif : 400 19px/18px var(--font-serif);

    --sans-m  : 400 18px/20px var(--font-sans);
    --serif-m : 450 21px/22px var(--font-serif);

    --sans-s  : 400 14px/16px var(--font-sans);
    --serif-s : 450 16px/16px var(--font-serif);

    /* Set the defaults */
    font-size   : var(--font-size);
    font-family : var(--font-serif);
    font-weight : var(--font-weight);
    background  : var(--background);
    color       : var(--text);
}

body {
    font-size   : var(--font-size);
    line-height : var(--font-height);
}

::selection {
    background : var(--text-alt);
}
}/* Global Settings *//* Main Body Structure */
body {
    display               : grid;
    padding               : 1rlh 2.5rlh;
    grid-template-columns : 30rem 1fr;
    grid-template-areas   : "header buy" "content gallery" "footer footer";
    gap                   : 0 2.5rlh;
    min-height            : 100dvh;
    grid-template-rows    : auto 1fr auto;
}
#edizione body {
    grid-template-areas : "header buy" "content gallery" "chapters gallery" "footer footer";
    align-items         : start;
    align-content       : start;
    grid-template-rows  : auto auto 1fr auto;
}
@media (width < 900px) {
    body {
        grid-template-areas : "header buy" "content ." "gallery ." "footer footer";
        grid-template-rows    : auto auto 1fr auto;
    }
    #edizione body {
        grid-template-areas : "header buy" "content ." "gallery ." "chapters ." "footer footer";
        grid-template-rows    : auto auto 1fr auto auto;
    }
}
@media (width < 760px) {
    
}
@media (width < 600px) {
    body {
        grid-template-columns : 1fr;
        padding               : 1rlh 1rlh;
        grid-template-areas : "header" "content" "gallery" "footer";
    }
    #edizione body {
        grid-template-areas : "header" "content" "gallery" "chapters" "footer";
    }
}
.overlay-is-visible {
    overflow: hidden;
}/* Reusable Components *//* Editor Styles */
.editor {

    p:not(:last-child) {
        margin-bottom : 1rlh;
    }

    u {
        text-decoration: underline;
    }

    small {
        font : var(--serif-s);
    }

    strong {
        font : var(--sans);
        text-wrap  : balance;
    }
}/* Default Image Styles */
img {
    display   : block;
    width     : auto;
    height    : auto;
    max-width : 100%;
}/* UI Elements *//* Site's Header */
.header {
    grid-area : header;
}
.day-time {
    display         : flex;
    justify-content : space-between;
    font            : var(--mono);
    text-transform  : uppercase;
    margin-bottom   : 0.75rlh;
}
@media (width >= 450px) {
    .day .compact { display : none; }
}
@media (width < 450px) {
    .day .extended { display : none; }
}/* Compasso D'oro */
.compasso-link {
    padding-top    : 2rlh;
    display        : inline-block;
    padding-bottom : 2rlh;
}
.compasso-img {
    display : block;
    width   : 7rlh;
}/* Site's Navigation */
.navigation {
    color : var(--accent);
    font  : var(--sans-m);
}
.navigation-row {
    margin-bottom : 0.25rlh;
}
.navigation-archive {
    display : grid;
    grid-template-columns: auto 1fr;
    gap : 0.25rlh;
}
.navigation-editions {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
.navigation-edition:not(:last-child)::after {
    content     : ", ";
    white-space : pre;
}
.navigation span {
    font-family : var(--font-serif);
    display: inline-block;
    margin : 0 0.125rlh;
}
.navigation-link:hover,
.navigation-link[aria-current] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}/* The Buy Now Button */
.buy-now {
    grid-area           : header;
    aspect-ratio        : 1;
    background          : var(--accent);
    width               : 10rlh;
    align-self          : center;
    justify-self        : end;
    border-radius       : 50%;
    text-align          : center;
    display             : flex;
    justify-content     : center;
    align-items         : center;
    text-decoration     : underline;
    font                : var(--sans-m);
    transform           : translate(100%,15%) rotate(-20deg);
    transition-property : transform;
    color : var(--stickerText)
}
.buy-now:hover {
    transform : translate(100%,15%) rotate(-10deg);
}/* We need some mobile adjustments */
@media (width < 750px) {
    .compasso-link {
        padding-bottom : 5rlh;
    }
    .buy-now {
        transform : translate(-10%,15%) rotate(-20deg);
    }
    .buy-now:hover {
        transform : translate(-10%,15%) rotate(0deg);
    }
}
@media (width < 600px) {
    .buy-now {
        font  : var(--sans);
        width : 8rlh;
    }
}/* Set the ZINDEX of a few items on the homepage*/
#home :where(.day-time,.header-home-link,.compasso-link,.buy-now,.footer) {
    position : relative;
    z-index  : 100;
}/* Shared Styles */
.column-title {
    font           : var(--mono);
    text-transform : uppercase;
    position       : relative;
    margin-top     : 2rlh;
    margin-bottom  : 1.5rlh;
}/* The Horizontal Line */
.column-title::before {
    content : "";
    position : absolute;
    top : -0.75rlh;
    left : 0;
    width : 5rlh;
    height : 2px;
    background: var(--text);
}/* Left Column */
.left-column {
    grid-area : content;
}
.left-column-text {
    font : var(--serif);
}/* The Chapters Section */
.chapters {
    grid-area : chapters;
    font      : var(--serif-s);
    text-wrap : balance;
}
.chapters strong {
    font : var(--sans-s);
}
.chapters-columns {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 1rlh;
}/* Homepage text is slightly different */
.left-column-it {
    font : var(--sans-m);
    text-wrap: balance;
}
.left-column-en {
    font : var(--serif-m);
    text-wrap: balance;
}
.left-column-it u {
    text-decoration-thickness: 2px;
    display: block;
}
.left-column-it strong:first-of-type {
    margin-left : 2rlh;
}/* Right Column */
.right-column {
    grid-area : gallery;
    position  : relative;
}
.right-column-text {
    margin-bottom : 1rlh;
    font          : var(--serif);
}/* The Gallery Container */
.right-column-images {
    display               : grid;
    grid-template-columns : auto auto;
    justify-content       : start;
    gap                   : 1.5rlh;
}
.right-column-images-left,
.right-column-images-right {
    display : grid;
    gap     : 1.5rlh;
}
.right-column-images-left img:nth-child(even) { display : none; }
.right-column-images-right img:nth-child(odd) { display : none; }
@media (width >= 900px) {
    .right-column::after {
        content: "";
        position: absolute;
        bottom: -1rlh;
        left: 0;
        width: 5rlh;
        height: 2px;
        background: var(--text);
    }
}/* The CC version of the right column */
.right-column-cc {
    display               : grid;
    grid-template-columns : auto auto auto 1fr;
    gap                   : 3rlh;
}
.logo-link {
    display: inline-block;
    margin-top : 1rlh;
}
.logo {
    mix-blend-mode: multiply;
    width : 5rlh;
}/* We need to do some adjustments to make the columns fit */
@media (width < 1400px) {
    .right-column-cc {
        grid-template-columns : auto auto auto;
        gap                   : 2rlh;
    }
}
@media (width < 1200px) {
    .right-column-cc {
        grid-template-columns : auto auto;
        grid-template-rows    : auto 1fr;
        gap                   : 2rlh;
    }
    .right-column-second {
        grid-row: 1 / 3;
    }
}
@media (width < 1050px) {
    .right-column-cc {
        grid-template-columns : 1fr;
        grid-template-rows    : auto;
        gap                   : 2rlh;
    }
    .right-column-second {
        grid-row: unset;
    }
}/* Home Has a slightly different columns arrangment */
#home .right-column-images-right {
    width : 75%;
}
@media (width < 1300px) {
    .right-column-images-left img:nth-child(even) { display : block; }
    .right-column-images-right img:nth-child(odd) { display : block; }
    .right-column-images-right { display : none }
    .right-column-images-left { grid-column : span 2; }
}/* Homapage Overlay Styles */
.overlay {
    position : fixed;
    inset    : 0;
    z-index  : 10;
    cursor   : pointer;
    display  : none;
    background-image : var(--overlayBgDesk);
}
.overlay-is-visible .overlay {
    display: block;
}
.overlay[data-style="fullscreen"] {
    background-repeat   : no-repeat;
    background-size     : cover;
    background-position : top left;
}
@media (orientation : portrait) {
    .overlay {
        background-image    : var(--overlayBgMobile);
        background-repeat   : no-repeat;
        background-size     : cover;
        background-position : top center;
    }
}/* Site's Footer */
.footer {
    grid-area  : footer;
    font       : var(--serif-s);
    margin-top : 2.5rlh;
}
.footer-item:not(:last-child)::after {
    content     : " | ";
    white-space : pre;
}
.footer-link:hover {
    text-decoration: underline;
}