:root {
    /* 1 "design pixel" from the 1920px mockup.
       Scales with the viewport, frozen below 1000px and above 3000px. */
    --px: calc(clamp(1000px, 100vw, 3000px) / 1920);

    /* Colors */
    --color-navy: #002d59;
    --color-white: #fff;
    --color-caption-bg: #ffffff99;      /* caption background */

    /* Fonts */
    --font-display: "Bebas Neue", sans-serif;
    --font-serif: "Bevan", serif;
    --font-body: "Barlow Condensed", sans-serif;

    /* Effects */
    --text-shadow: calc(4 * var(--px)) calc(4 * var(--px)) 0 var(--color-navy);

    /* Decorative boxes */
    --box-long: calc(175 * var(--px));
    --box-short: calc(46 * var(--px));
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    #home .bg-video {
        display: none;                   /* poster background shows instead */
    }
}

/* ==========================================================================
   Base
   ========================================================================== */

html, body {
    margin: 0;
    padding: 0;
}

h1, h2 {
    margin: 0;
    font: inherit;
}

.container {
    font-family: var(--font-display);
}

/* ==========================================================================
   Menu
   ========================================================================== */

nav {
    position: absolute;
    top: calc(78 * var(--px));
    left: 0;
    right: 0;
    z-index: 10;
}

nav ul {
    margin: 0;
    padding: 0;                      /* removes the browser's default 40px indent */
    list-style: none;
    display: flex;
}

nav li {
    flex: 1;
    text-align: center;
}

nav li.spacer {
    flex: 0 0 calc(439 * var(--px)); /* matches the logo width */
}

nav a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: calc(35 * var(--px));
    color: var(--color-white);
}

/* ==========================================================================
   Home
   ========================================================================== */

#home {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--color-navy) url("../img/np_poster.jpg") center / cover no-repeat;
}

#home .bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

#home .logo {
    width: calc(439 * var(--px));
    height: calc(423 * var(--px));
}

#home .mid-col {
    flex: 1;                         /* fill the rest of the section */
    display: flex;
    justify-content: center;
    padding-top: calc(32 * var(--px));
}

#home .mid-col .stretch {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Keep this selector specific: #home .spacer would also hit the nav spacer */
#home .mid-col .stretch .spacer {
    flex-grow: 1;
}

#home .bottom-text {
    padding-bottom: calc(44 * var(--px));
    font-size: calc(55 * var(--px));
    text-shadow: var(--text-shadow);
    color: var(--color-white);
    text-align: center;
}

#home .boxes {
    display: flex;
    justify-content: space-between;
}

#home .boxes > div {
    width: var(--box-long);
    height: var(--box-short);
    background-color: var(--color-navy);
}

/* ==========================================================================
   History
   ========================================================================== */

#hist {
    background-color: var(--color-navy);
}

#hist > .cols {
    display: flex;
}

#hist .content {
    padding-top: calc(75 * var(--px));
    flex: 1;
}

#hist .block {
    font-family: var(--font-body);
    text-align: center;
    font-size: calc(38 * var(--px));
    color: var(--color-white);
}

#hist .block p {
    margin: 0;
}

#hist .block p + p {
    margin-top: 1lh;                 /* one empty line between paragraphs */
}

#hist .logo {
    width: calc(302 * var(--px));
    height: calc(282 * var(--px));
    margin-bottom: calc(50 * var(--px));
}

#hist .taste-mexico {
    padding-top: calc(70 * var(--px));
    font-family: var(--font-serif);
    font-size: calc(45 * var(--px));
}

#hist .vert-boxes {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#hist .section-bg {
    position: relative;
    width: calc(810 * var(--px));
    height: calc(1157 * var(--px));
    left: calc(-46 * var(--px));
    z-index: 0;
    margin: calc(31 * var(--px)) 0;
}

#hist .vert-boxes > div {
    width: var(--box-short);
    height: var(--box-long);
    background-color: var(--color-white);
}

/* ==========================================================================
   Difference
   ========================================================================== */

#npdiff {
    background: url("../img/np_diferencia_web.webp") center / cover no-repeat;
    height: calc(1100 * var(--px));
    display: flex;
    align-items: center;
    flex-direction: column;
}

#npdiff .top-text,
#npdiff .bottom-text {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: calc(50 * var(--px));
    color: var(--color-white);
    text-shadow: var(--text-shadow);
    text-align: center;
}

#npdiff .sabroso {
    width: calc(594 * var(--px));
    height: calc(236 * var(--px));
}

/* ==========================================================================
   Products
   ========================================================================== */

#products {
    height: calc(1264 * var(--px));
    position: relative;
}

#products .box {
    position: absolute;
}

#products .delicioso {
    width: calc(631 * var(--px));
    height: calc(247 * var(--px));
    left: calc(644 * var(--px));
    top: calc(123 * var(--px));
}

#products .flour-tortillas {
    width: calc(380 * var(--px));
    height: calc(380 * var(--px));
    background: url("../img/np_flour_tortillas.webp") center / cover no-repeat;
    top: calc(97 * var(--px));
    left: calc(77 * var(--px));
}

#products .content {
    top: calc(95 * var(--px));
    left: calc(145 * var(--px));
    width: calc(413 * var(--px));
    box-sizing: border-box;
    background-color: var(--color-caption-bg);
    position: absolute;
    padding: calc(15 * var(--px)) calc(30 * var(--px));
    color: var(--color-navy);
}

#products .name {
    font-size: calc(50 * var(--px));
}

#products .text {
    font-family: var(--font-body);
    font-size: calc(24 * var(--px));
    font-weight: 500;
}

#products .corn-tortillas {
    width: calc(389 * var(--px));
    height: calc(389 * var(--px));
    background: url("../img/np_corn_tortillas.webp") center / cover no-repeat;
    top: calc(419 * var(--px));
    left: calc(320 * var(--px));
}

#products .corn-tortillas > .content {
    left: calc(178 * var(--px));
    top: calc(77 * var(--px));
}

#products .salsas {
    background: url("../img/np_salsas.webp") center / cover no-repeat;
    width: calc(378 * var(--px));
    height: calc(252 * var(--px));
    left: calc(1365 * var(--px));
    top: calc(91 * var(--px));
}

#products .salsas > .content {
    width: calc(510 * var(--px));
    left: calc(-24 * var(--px));
    top: calc(183 * var(--px));
}

#products .tortilla-chips {
    background: url("../img/np_tortilla_chips.webp") center / cover no-repeat;
    width: calc(405 * var(--px));
    height: calc(400 * var(--px));
    left: calc(960 * var(--px));
    top: calc(415 * var(--px));
}

#products .tortilla-chips > .content {
    left: calc(247 * var(--px));
    top: calc(81 * var(--px));
    width: calc(453 * var(--px));
}

#products .products-row {
    position: absolute;
    left: calc(77 * var(--px));
    right: calc(77 * var(--px));
    top: calc(833 * var(--px));

    display: flex;
    gap: calc(60 * var(--px));       /* last visible pack peeks in, hinting there is more */
    overflow-x: auto;
    overscroll-behavior-x: contain;  /* don't trigger browser back/forward swipe */
    scrollbar-width: none;           /* auto-scrolls endlessly (js/app.js), a scrollbar would jump */
    user-select: none;
    -webkit-user-select: none;
}

#products .products-row::-webkit-scrollbar {
    display: none;                   /* Safari */
}

#products .products-row > img {
    flex: 0 0 auto;
    width: calc(263 * var(--px));
    height: calc(288 * var(--px));
    -webkit-user-drag: none;
}

/* ==========================================================================
   Decorative frame boxes (products section)
   ========================================================================== */

#products .left-boxes, #products .right-boxes, #products .top-boxes, #products .bottom-boxes {
    position: absolute;
    display: flex;
    justify-content: space-between;
}

#products .left-boxes > div, #products .right-boxes > div, #products .top-boxes > div, #products .bottom-boxes > div {
    background-color: var(--color-navy);
}

#products .left-boxes > div, #products .right-boxes > div {
    height: var(--box-long);
}

#products .top-boxes > div, #products .bottom-boxes > div {
    width: var(--box-long);
}

#products .left-boxes, #products .right-boxes {
    top: 0;
    bottom: 0;
    width: var(--box-short);
    flex-direction: column;
}

#products .left-boxes {
    left: 0;
}

#products .right-boxes {
    right: 0;
}

#products .top-boxes, #products .bottom-boxes {
    left: 0;
    right: 0;
    height: var(--box-short);
}

#products .top-boxes {
    top: 0;
}

#products .bottom-boxes {
    background-color: var(--color-navy);
    bottom: 0;
}

#products .bottom-boxes > div {
    background-color: var(--color-white);
}

/* ==========================================================================
   Contacts
   ========================================================================== */

#contacts {
    height: calc(837 * var(--px));
    box-sizing: border-box;
    background-color: var(--color-navy);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: calc(68 * var(--px));
}

#contacts .top-text {
    text-align: center;
    font-family: var(--font-serif);
    font-size: calc(40 * var(--px));
}

#contacts .button {
    font-size: calc(35 * var(--px));
    color: var(--color-navy);
    background-color: var(--color-white);
    width: calc(398 * var(--px));
    height: calc(86 * var(--px));
    line-height: calc(86 * var(--px));
    text-align: center;
    margin-top: calc(30 * var(--px));
    margin-bottom: calc(57 * var(--px));
    text-decoration: none;
}

#contacts > img {
    width: calc(221 * var(--px));
    height: calc(206 * var(--px));
}

#contacts .address {
    font-family: var(--font-body);
    font-size: calc(28 * var(--px));
    font-style: normal;
    margin-top: calc(32 * var(--px));
    margin-bottom: calc(20 * var(--px));
}

#contacts .address a {
    color: inherit;
    text-decoration: none;
}

#contacts .sm-icon {
    width: calc(31 * var(--px));
    height: calc(31 * var(--px));
}

/* ==========================================================================
   Tablet (768px mockup)
   Below 1000px the desktop layout would stop scaling, so switch to the
   single-column tablet design. 1 --px = 1 pixel of the 768px mockup.
   ========================================================================== */

@media (max-width: 999px) {
    :root {
        --px: calc(100vw / 768);
        --box-long: calc(110 * var(--px));
        --box-short: calc(29 * var(--px));
    }

    /* Home */

    nav {
        display: none;
    }

    @media (orientation: portrait) {
        #home {
            background-image: url("../img/np_poster_portrait.jpg");
        }
    }

    #home .boxes > div:nth-child(n+5) {
        display: none;
    }

    #home .mid-col {
        padding-top: calc(52 * var(--px));
    }

    #home .logo {
        width: calc(305 * var(--px));
        height: calc(294 * var(--px));
    }

    #home .bottom-text {
        padding-bottom: calc(76 * var(--px));
        font-size: calc(38 * var(--px));
    }

    /* History */

    #hist > .cols {
        display: block;
    }

    #hist .vert-boxes,
    #hist .section-bg {
        display: none;
    }

    #hist .content {
        padding: calc(71 * var(--px)) calc(100 * var(--px)) calc(85 * var(--px));
    }

    #hist .block {
        font-size: calc(26 * var(--px));
        line-height: 1.3;
    }

    #hist .block br {
        display: none;
    }

    #hist .logo {
        width: calc(288 * var(--px));
        height: calc(269 * var(--px));
        margin-bottom: calc(50 * var(--px));
    }

    #hist .taste-mexico {
        padding-top: calc(50 * var(--px));
        font-size: calc(32 * var(--px));
    }

    /* Difference */

    #npdiff {
        height: calc(935 * var(--px));
        padding: 0 calc(80 * var(--px));
    }

    #npdiff .top-text,
    #npdiff .bottom-text {
        font-size: calc(28 * var(--px));
        line-height: 1.32;
    }

    #npdiff br {
        display: none;
    }

    #npdiff .sabroso {
        width: calc(460 * var(--px));
        height: calc(183 * var(--px));
    }

    /* Products */

    #products {
        height: calc(1015 * var(--px));
    }

    #products .top-boxes > div:nth-child(n+5),
    #products .bottom-boxes > div:nth-child(n+5) {
        display: none;
    }

    #products .delicioso {
        width: calc(435 * var(--px));
        height: calc(170 * var(--px));
        left: calc(166 * var(--px));
        top: calc(63 * var(--px));
    }

    #products .content {
        left: calc(67 * var(--px));
        top: calc(67 * var(--px));
        width: calc(232 * var(--px));
        padding: calc(13 * var(--px)) calc(20 * var(--px));
    }

    #products .name {
        font-size: calc(26 * var(--px));
    }

    #products .text {
        font-size: calc(16 * var(--px));
    }

    #products .flour-tortillas {
        width: calc(206 * var(--px));
        height: calc(206 * var(--px));
        left: calc(51 * var(--px));
        top: calc(254 * var(--px));
    }

    #products .corn-tortillas {
        width: calc(211 * var(--px));
        height: calc(211 * var(--px));
        left: calc(502 * var(--px));
        top: calc(279 * var(--px));
    }

    #products .corn-tortillas > .content {
        left: calc(-104 * var(--px));
        top: calc(85 * var(--px));
        width: calc(249 * var(--px));
    }

    #products .tortilla-chips {
        width: calc(206 * var(--px));
        height: calc(206 * var(--px));
        left: calc(51 * var(--px));
        top: calc(516 * var(--px));
    }

    #products .tortilla-chips > .content {
        left: calc(67 * var(--px));
        top: calc(84 * var(--px));
        width: calc(232 * var(--px));
    }

    #products .salsas {
        width: calc(245 * var(--px));
        height: calc(186 * var(--px));
        left: calc(469 * var(--px));
        top: calc(533 * var(--px));
    }

    #products .salsas > .content {
        left: calc(-71 * var(--px));
        top: calc(101 * var(--px));
        width: calc(274 * var(--px));
    }

    #products .products-row {
        left: calc(54 * var(--px));
        right: calc(54 * var(--px));
        top: calc(829 * var(--px));
        gap: calc(30 * var(--px));
    }

    #products .products-row > img {
        width: calc(115 * var(--px));
        height: calc(127 * var(--px));
    }

    /* Contacts */

    #contacts {
        height: auto;
        padding: calc(76 * var(--px)) 0 calc(120 * var(--px));
    }

    #contacts .top-text {
        max-width: calc(460 * var(--px));
        font-size: calc(27 * var(--px));
        line-height: 1.7;
    }

    #contacts .top-text br {
        display: none;
    }

    #contacts .button {
        font-size: calc(29 * var(--px));
        width: calc(305 * var(--px));
        height: calc(63 * var(--px));
        line-height: calc(63 * var(--px));
        margin-top: calc(64 * var(--px));
        margin-bottom: calc(56 * var(--px));
    }

    #contacts > img {
        width: calc(233 * var(--px));
        height: calc(217 * var(--px));
    }

    #contacts .address {
        text-align: center;
        line-height: 1.3;
        margin-top: calc(51 * var(--px));
        margin-bottom: calc(80 * var(--px));
    }

    #contacts .address .line {
        display: block;
    }

    #contacts .address .sep {
        display: none;
    }

    #contacts .sm-icon {
        width: calc(64 * var(--px));
        height: calc(64 * var(--px));
    }
}