/* =============================================================================
   bastiancontrarioparma.it — the whole site's stylesheet.

   Production runs a TemplateMonster "Gutenberg" theme on CherryFramework and
   loads about twenty stylesheets. None of them are ported here. Every value
   below was read off the live site's computed styles, so this file reproduces
   the rendered result rather than transcribing the generator.

   HOW THOSE VALUES ARE MEASURED — and it is NOT two viewports. An earlier pass
   read them at 1440x900 and 375x720 only. That method shipped three defects to
   all forty pages: the header row 5px too tall across 768-1199, the wordmark
   33.03px too tall at 767, and the footer email overflowing its column at
   768-991. All three are invisible at both 1440 and 375, and the visual-diff
   gate reported the home page unchanged to the pixel the whole time they were
   live.

   Errors hide JUST BELOW a breakpoint. A divergence that scales with the
   viewport is largest at a band's last pixel, and at a narrow width the
   reset's `img { max-width: 100% }` and friends clamp it out of sight
   entirely: the same wordmark that was 33.03px wrong at 767 was 0.00px wrong
   at 375. Sampling a band at its top edge dominates sampling it anywhere else.

   So measure at the top edge of every band. The boundaries in this corpus are
   544 / 768 / 992 / 1200 from the theme (gutenberg/style.css:244-260, with the
   1200 step's value replaced by the customizer's inline block), plus 766.4px
   (47.9em), 980.5px and 990.4px (61.9em) from plugin styles inlined into seven
   of the rendered pages. `tools/visual-diff.sh` captures 543, 766, 767, 980,
   990, 991, 1199 and 1440, which straddles every one of them; its header
   comment carries the derivation. Check both sides of a boundary before
   writing a value here.

   And grep BOTH override sources before concluding what a rule does. The
   owner's overrides live in the custom-css-js uploads folder under
   reference/www/ AND in inline <style> blocks in the rendered pages, and some
   exist only in the latter — the 767px wordmark cap in the max-width:767 block
   below has no file counterpart anywhere under reference/www/. (Spell that
   folder's full path nowhere in this file: tools/check.sh greps src/ for the
   old host's paths, and a comment quoting one trips it.)

   Order: reset, custom properties, @font-face, base typography, layout
   helpers, header, breadcrumbs, footer, icon font. Page-specific rules go at
   the bottom, one commented section per page.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

html {
    box-sizing: border-box;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
    margin: 0;
}

img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    vertical-align: top;
    border: 0;
}

table {
    width: 100%;
    margin: 0 0 1.5em;
    border-collapse: collapse;
    border-spacing: 0;
}

th, td {
    padding: 0;
    text-align: left;
}

ul, ol, dl {
    margin: 0 0 3em;
    padding-left: 0;
    list-style: none;
}


/* -----------------------------------------------------------------------------
   Custom properties — the palette and the type scale the theme was configured
   with. Anything hard-coded elsewhere in this file is a one-off.
   -------------------------------------------------------------------------- */

:root {
    /* Palette */
    --bcp-page-bg:      #fffde7;  /* body background */
    --bcp-ink:          #1b1b1b;  /* body text, headings, links */
    --bcp-accent:       #ffae13;  /* the amber the theme calls accent 1 */
    --bcp-secondary:    #2b2f3e;  /* accent 2 */
    --bcp-muted:        #767675;  /* accent 3, h6 */
    --bcp-dim:          #bdbdbd;  /* text on the dark header and footer */
    --bcp-dark:         #000;     /* header bar, footer widget area */
    --bcp-dark-bar:     #141414;  /* the copyright strip below the footer */
    --bcp-invert-ink:   #fff;

    /* Type */
    --bcp-font-body:    Lato, sans-serif;
    --bcp-font-display: "Amatic SC", cursive;   /* h1, h4, buttons */
    --bcp-font-script:  "Berkshire Swash", cursive;  /* h2, the logo wordmark */

    /* Layout */
    --bcp-container:    1200px;
    --bcp-gutter:       15px;
}


/* -----------------------------------------------------------------------------
   Fonts

   Lato, Amatic SC and Berkshire Swash are the three Google families the theme
   asks for; production loads them from fonts.googleapis.com. They are
   self-hosted here so the site has no third-party runtime dependency. Latin
   and latin-ext only, which is what the Italian copy needs. FontAwesome 4.6
   is the theme's own copy, used for the footer icons and list bullets.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/assets/fonts/lato-300-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/assets/fonts/lato-300-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/lato-400-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/lato-400-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/assets/fonts/lato-700-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/assets/fonts/lato-700-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Amatic SC";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/amatic-sc-400-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Amatic SC";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/amatic-sc-400-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Amatic SC";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/assets/fonts/amatic-sc-700-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Amatic SC";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/assets/fonts/amatic-sc-700-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Berkshire Swash";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/berkshire-swash-400-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Berkshire Swash";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/berkshire-swash-400-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(/assets/fonts/fontawesome-webfont.woff2) format("woff2");
}


/* -----------------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------------- */

body {
    background-color: var(--bcp-page-bg);
    color: var(--bcp-ink);
    font-family: var(--bcp-font-body);
    font-size: 18px;
    font-weight: 300;
    font-style: normal;
    line-height: 1.56;
    text-align: left;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 26px;
    color: var(--bcp-ink);
}

h1 {
    font-family: var(--bcp-font-display);
    font-size: 70px;
    font-weight: 700;
    line-height: 1.07;
}

h2 {
    margin-bottom: 17px;
    font-family: var(--bcp-font-script);
    font-size: 44px;
    font-weight: 400;
    line-height: 1.25;
}

h3 {
    margin-bottom: 8px;
    font-size: 26px;
    font-weight: 300;
    line-height: 1.39;
}

h4 {
    margin-bottom: 20px;
    font-family: var(--bcp-font-display);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.42;
}

h5 {
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.55;
}

h6 {
    margin-bottom: 11px;
    color: var(--bcp-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.71;
}

@media (min-width: 992px) {
    h2 { font-size: 48px; }
}

p {
    margin: 0 0 40px;
}

p:last-of-type {
    margin-bottom: 0;
}


/* -----------------------------------------------------------------------------
   Builder content scope — `.builder-content`

   The base margins above are production's, but production overrides all of
   them inside its page-builder wrapper,
   `<div id="tm_builder_outer_content" class="tm_builder_outer_content">`:

     style.css:1554-1555   .tm_builder_outer_content h1…h6 { margin: 0 }
     style.css:1611        .tm_builder_outer_content p     { margin-bottom: 10px }

   The shell drops that wrapper — its own box contributes no padding and no
   margin — but the *scope* it provided is real, so it is re-created here under
   the site's own name. Add `builder-content` to <main> on a builder page:

       <main id="main" class="site-main builder-content">

   and leave it off on a non-builder page, which then keeps the base 26/17/8/
   20/10/11px heading margins and the 40px paragraph margin.

   EVERY page — builder or plain — also opens <main> with production's own
   page title, which is hidden but present:

       <header class="entry-header">
           <h1 class="entry-title screen-reader-text">Pub</h1>
       </header>

   It is the page's only top-level heading; everything below it starts at
   <h2>. Because .screen-reader-text clips it, NO rect or screenshot
   comparison can catch its absence — the home page shipped without one. Carry
   the page's OWN title, never "Home": Pub, Gallery, About, Food Truck,
   Produzione, Tap Room, Contacts, Contatti, Reservations, Menu. Two
   exceptions, both Task 7's: the menu ARCHIVE uses
   `page-title screen-reader-text`, and the 27 menu ITEM pages use
   `mprm-header-title`, which is VISIBLE and must not be hidden.

   Which pages are which — counted, not guessed, from the wrapper element in
   reference/rendered/*.html:

     BUILDER  (9):  /  /pub/  /about-2/  /contacts/  /food-truck/
                    /birrificio-tap-room/  /birrificio-produzione/  /gallery/
                    /reservations/
     PLAIN   (30):  /contatti/  /menu/  /menu-pdf/  and the 27 /menu/<item>/
                    pages. src/404.html is plain too.

   Production has a tenth builder page, /eventi/, which this rebuild does NOT
   reproduce — the owner dropped it, because every link on it pointed at an
   event post outside the reproduced set. The reproduced set is 39 pages.

   Measured on production at 1440x900 (getComputedStyle over every heading and
   paragraph inside #tm_builder_outer_content on all ten builder pages): every
   heading margin-top/bottom is 0px; the dominant paragraph margin-bottom is
   10px. Values other than 10px on a paragraph (5/6/13/15/20/30px) come from a
   builder module's own inline CSS and belong to that page's task, not here.

   `p:last-of-type` deliberately gets 10px too, not 0: production's
   `.tm_builder_outer_content p` (style.css:1611) has the same specificity as
   `p:last-of-type` (style.css:1550) and wins on source order. Spelled out in
   the selector here so appending page rules below cannot silently flip it.
   -------------------------------------------------------------------------- */

.builder-content :is(h1, h2, h3, h4, h5, h6) {
    margin: 0;
}

.builder-content p,
.builder-content p:last-of-type {
    margin-bottom: 10px;
}

/* Adjacency, style.css:1572/1575/1578/1581/1584. All five are ported, and all
   five were checked on production rather than assumed.

   Two of them (1578 h4+p, 1584 h2+h3) hang off `.tm_builder_outer_content`
   directly. The other three hang off `.tm_pb_module`, a page-builder module
   wrapper the shell deletes. Injecting the same DOM in both places on /pub/
   and /about-2/ shows they fire inside a module and only inside it:

     probe placed …                            p+h6   h4+ul   h2+p>img
     directly in #tm_builder_outer_content       0px    26px      0px
     inside a real .tm_pb_module                30px    20px     15px

   All builder-page content lives inside those modules (/pub/ has 23 of them,
   /about-2/ 16), so once the wrappers are flattened away `.builder-content` is
   the equivalent scope and the rules belong on it. Injected-DOM margin-top,
   production vs this file: h4+p 13/13, h2+h3 15/15, p+h6 30/30, h4+ul 20/20,
   h2+p>img 15/15. */
.builder-content h4 + p {
    margin-top: 13px;
}

.builder-content h2 + h3 {
    margin-top: 15px;
}

.builder-content p + h6 {
    margin-top: 30px;
}

.builder-content h4 + ul {
    margin-top: 20px;
}

.builder-content h2 + p img {
    margin-top: 15px;
}


/* The page builder's row/column primitive — `.builder-row` / `.builder-col`

   Not a home-page detail: production builds ten pages out of this same pair,
   and they are the bones of every one of them (/pub/ alone has 8 rows and 23
   columns, /birrificio-produzione/ 6 and 16, /gallery/ 5 and 17). It lives
   above the divider so Tasks 6-9 use it rather than re-declaring the same
   forty lines under five more page prefixes that can silently drift apart.

   A row is a wrapping flex box pulled 15px into the container's gutter; a
   column is a flex item that pads the gutter back. Below 768px every column
   is full width — the builder's own behaviour, not a choice made here.

   Use it as the base class and let the page add its own modifiers:

       <div class="builder-row home-row--heading">
           <div class="builder-col builder-col--third"> … </div>

   `--third` and `--half` are the two column spans the home page needs; add
   `--quarter`, `--two-thirds` and so on here, beside them, as later pages
   turn out to need them. Page-specific row modifiers (`.home-row--heading`,
   `.home-row--places`, …) stay in that page's own section below the divider,
   because their values are per-row builder settings, not builder defaults.
   -------------------------------------------------------------------------- */

.builder-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--bcp-gutter) * -1);
    margin-right: calc(var(--bcp-gutter) * -1);
}

.builder-col {
    position: relative;
    flex: 0 0 100%;
    max-width: 100%;
    min-height: 1px;
    padding-left: var(--bcp-gutter);
    padding-right: var(--bcp-gutter);
}

/* THE THIRDS LITERAL. Production's builder columns are `col-md-4 col-lg-4
   col-xl-4`, and TWO stylesheets define those: the theme's own
   (gutenberg/style.css:680-684) at 33.3333333333%, and power-builder's
   grid.css, which loads AFTER it at the same specificity and inside the same
   `(min-width: 768px)` query. grid.css therefore wins, and production's
   effective literal is 33.33333% — five threes.

   The distinction is not cosmetic. Chrome resolves a percentage flex-basis to
   the nearest 1/64px, and only the theme's ten-three literal rounds UP:

       row     33.3333%      33.33333%     33.3333333333%
       720     239.984375    239.984375    240
       940     313.328125    313.328125    313.328125
       1200    399.984375    399.984375    400

   720 and 1200 are the container widths at 768-991 and from 1200, so a
   ten-three literal is 0.016px wide at exactly the two bands the gate samples,
   and live production measures 399.9844 at 1440. Four threes and five threes
   are indistinguishable at every container width in this corpus; five is used
   because it is the literal production actually serves. */
@media (min-width: 768px) {
    /* `--quarter` added by Task 6: the four venue pages' photo rows are four
       columns wide (production's `col-md-3`), and /food-truck/ uses `--third`
       and `--half` unchanged. */
    .builder-col--quarter {
        flex-basis: 25%;
        max-width: 25%;
    }

    .builder-col--third {
        flex-basis: 33.33333%;
        max-width: 33.33333%;
    }

    .builder-col--half {
        flex-basis: 50%;
        max-width: 50%;
    }
}


a {
    color: var(--bcp-ink);
    text-decoration: none;
    background-color: transparent;
    transition: .3s;
}

a:hover {
    color: var(--bcp-accent);
}

h1 a:hover, h2 a:hover, h3 a:hover,
h4 a:hover, h5 a:hover, h6 a:hover {
    color: var(--bcp-accent);
}

b, strong {
    font-weight: 700;
}

dfn, cite, em, i {
    font-style: italic;
}

/* The dark header and footer run on the inverted scheme. */
.invert,
.invert h1, .invert h2, .invert h3,
.invert h4, .invert h5, .invert h6 {
    color: var(--bcp-invert-ink);
}

.invert a {
    color: var(--bcp-invert-ink);
}

.invert a:hover {
    color: var(--bcp-accent);
}

.site-header .invert a,
.site-footer .invert a {
    color: var(--bcp-dim);
}

.site-header .invert a:hover,
.site-footer .invert a:hover {
    color: var(--bcp-invert-ink);
}


/* -----------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

/* Production's grid is STEPPED, not one width. The theme declares the steps at
   style.css:244-260 (the builder's grid.css:1 carries a byte-identical copy):
   576px from 544, 720px from 768, 940px from 992, 1140px from 1200 — and the
   customizer's inline <style>, which the page loads after both stylesheets,
   overrides only the last one with
   `@media (min-width: 1200px){.container{max-width:1200px}}`. So the top step
   is 1200px, not the theme's 1140px. Below 544px there is no max-width at all.

   Site-wide, not a per-page detail: the header row is a .container too, so a
   missing step here is wrong on every page of the site, not just the one being
   built. Verified against live production at ten widths — see task-5-report.md
   section C. */
.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--bcp-gutter);
    padding-right: var(--bcp-gutter);
}

@media (min-width: 544px)  { .container { max-width: 576px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 940px; } }
@media (min-width: 1200px) { .container { max-width: var(--bcp-container); } }

/* The header row is exempt below 768px. Production resets it with
   `@media (max-width: 767px){.header-container .container{max-width:inherit}}`
   (style.css:3581-3583); its parent carries no max-width, so that `inherit`
   computes to `none` — measured on live production, which reports a computed
   max-width of exactly "none" at 375/480/544/600 while the page container at
   600 reports "576px". Written as `none` here because that is the value
   production actually resolves to. */
@media (max-width: 767px) {
    .header-container .container {
        max-width: none;
    }
}

/* The page wrapper. `overflow: hidden` stops full-bleed page sections from
   producing a horizontal scrollbar; the wrapping rules are production's own,
   style.css:3487-3493, which declares all three together:

     .site { word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto;
             -o-hyphens: auto; hyphens: auto; overflow: hidden; }

   Both wrapping properties are inherited, so this one rule is what makes every
   descendant on the site break an over-long word. It is load-bearing, not
   defensive: the footer's `bastiancontrarioparma@gmail.com` is a 241px
   unbreakable token in a 209.98px column between 768 and 991px, so without it
   the address overflows its column on all forty pages — measured, see
   task-5a-report.md section 3.

   `overflow-wrap` rather than the theme's `word-wrap` spelling: `word-wrap` is
   the legacy alias, both compute to the same thing, and the rest of this file
   uses current property names.

   `hyphens: auto` is carried over deliberately even though it changes nothing
   in the verification browser — forcing every element on live production to
   `hyphens: manual` moves zero of 424 boxes at twelve widths, because this
   Chromium ships no hyphenation dictionary. A browser that does carry one
   would hyphenate production and not the rebuild, so the declaration is what
   keeps the two identical everywhere rather than only here. `-ms-` and `-o-`
   are omitted: dead prefixes, no engine in service reads them. */
.site {
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow: hidden;
}

/* The skip link is `class="skip-link screen-reader-text"` — production's own
   markup, kept verbatim. `.skip-link` carries no rules here because it carries
   none on production either: the active theme's stylesheet never mentions it
   (only the unused twentytwenty* themes in the archive do), and every visual
   state it has comes from `.screen-reader-text` / `.screen-reader-text:focus`
   below (style.css:2997-3023). Measured on production at 375px: the link's
   rect is [0, 0, 1, 1], clipped — it is not visible until focused. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
}

.screen-reader-text:focus {
    z-index: 100000;
    top: 5px;
    left: 5px;
    width: auto;
    height: auto;
    clip: auto;
    clip-path: none;
    padding: 15px 23px 14px;
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
    color: #21759b;
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
}

/* The skip link's target. WordPress adds `tabindex="-1"` to #content from
   skip-link-focus-fix.js so the link moves focus and not just the scroll
   position; the shell has no JS, so the attribute is in the markup instead.
   The rule that keeps the resulting focus ring off is production's own,
   style.css:3025-3026 — it is there precisely because the attribute is
   expected. */
#content[tabindex="-1"]:focus {
    outline: 0;
}


/* -----------------------------------------------------------------------------
   Header

   Black full-bleed bar; inside it a 1200px row with the wordmark on the left
   and the menu on the right. The menu block is 54% of the row from 1200px up
   and 70% from 992px, which is what pushes the two items to the right edge.

   Production's masthead is `class="site-header minimal container"` and this
   shell's is `class="site-header"`. Both extra classes are deliberately not
   carried, and neither is a gap to close later. `container` is inert on the
   masthead: twelve rules across production's twenty-two stylesheets match
   `#masthead` only because of it, and all twelve set nothing but margin,
   horizontal padding and max-width — which style.css:3504-3507,
   `.container.site-header { max-width: inherit; padding-left: 0;
   padding-right: 0 }`, then takes back at higher specificity, `inherit`
   resolving to `none` off `#page.site`. Removing the class from live
   production and re-laying out moves 0 of the 424 element boxes under <body>,
   at every one of twelve widths — 375, 480, 544, 600, 767, 768, 900, 991, 992,
   1199, 1200, 1440 — each run against a null control that reports 0 for two
   snapshots of an unmutated page. (The sweep was re-run at all twelve for this
   sentence. The 489 previously quoted here was the whole-document element
   count; 65 of those are <head> nodes that generate no box at all, and of the
   424 that remain only 275 generate one.)

   `minimal` is NOT just the 1200px header-padding step. It is the theme's
   scope for the entire desktop header — fourteen rules in gutenberg/style.css,
   at 3558, 3684, 3687, 3701, 3704, 3707, 3711, 3714, 3721, 3727, 3730, 3736,
   3738 and 3740. Counted honestly:

     3684  `.site-header.minimal { }` — a stray comment, no declarations.
     3704  `.menu { width: 100% }`, no media query
             -> `.main-navigation .menu` in the Header block below
     3707  `.menu { width: 70%; margin: 0 0 0 auto }` at min-width 992
             -> the min-width:992px block below
     3711  `.menu { width: 54% }` at min-width 1200
     3701  `.site-branding { display: inline-block; padding: 3px 0 }` at 1200
     3558  `.header-container { padding: 23px 0 }` at 1200
             -> all three in the min-width:1200px block below
     3687  `.header-container_wrap { display: flex; align-items: center;
           justify-content: space-between }` at min-width 768
     3714  `.menu > li { text-align: center; flex-grow: 1; position: relative }`
           at min-width 768
             -> both in the min-width:768px block below, `position: relative`
                coming from the unscoped `.main-navigation li` rule
     3721, 3727, 3730, 3736, 3738, 3740 — every one scoped to `.isStuck`, which
           only themes/gutenberg/assets/js/jquery.stickup.js:69 ever adds. No
           rendered page carries it in its markup and this shell has no JS, so
           these six cannot fire on either side.

   All seven rules that declare anything are reproduced flat, without the
   class. That is what makes the class unnecessary, not the fact that it scopes
   only one step — it scopes thirteen more.

   Do not add either class to a page: it would be markup no rule in this file
   reads. ------------------------------------------------------------------ */

.header-wrapper {
    background-color: var(--bcp-dark);
}

.header-container {
    position: relative;
}

.header-container_wrap {
    position: relative;
}

.site-logo {
    margin: 0;
    font-family: var(--bcp-font-script);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.site-logo__link {
    display: inline-block;
    color: var(--bcp-invert-ink);
    line-height: 1;
    letter-spacing: 3.08px;
    text-transform: uppercase;
}

.site-header .invert .site-logo__link,
.site-header .invert .site-logo__link:hover {
    color: var(--bcp-invert-ink);
}

.main-navigation {
    display: block;
    width: 100%;
}

.main-navigation li {
    position: relative;
    text-align: left;
}

.main-navigation a {
    position: relative;
    display: block;
}

.main-navigation .menu {
    width: 100%;
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.main-navigation .menu > li > a {
    padding: .7em 1em;
    color: var(--bcp-invert-ink);
    font-family: var(--bcp-font-body);
    font-size: 20px;
    text-transform: lowercase;
}

.main-navigation .menu > li > a:focus {
    outline: none;
}

/* Amber dashed rule that slides in under the active or hovered item. */
.main-navigation .menu > li > a::after {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 50%;
    right: 50%;
    height: 2px;
    opacity: 0;
    background: linear-gradient(90deg, var(--bcp-accent) 70%, transparent 0);
    background-size: 8px 100%;
    transition: .3s;
}

.main-navigation .menu > li > a:hover,
.main-navigation .menu > li.current-menu-item > a {
    color: var(--bcp-accent);
}

.main-navigation .menu > li > a:hover::after,
.main-navigation .menu > li.current-menu-item > a::after {
    opacity: 1;
    left: 14px;
    right: 14px;
}

/* The burger. Production toggles a class from jQuery; a checkbox does the same
   job with no script, and being a real form control it stays keyboard
   operable. It is only ever visible below 768px. */
.menu-toggle {
    display: none;
    position: absolute;
    right: var(--bcp-gutter);
    top: 38px;
    width: 30px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(var(--bcp-invert-ink), var(--bcp-invert-ink)) center / 30px 4px no-repeat;
    transition: opacity .15s linear;
}

.menu-toggle::before,
.menu-toggle::after {
    content: "";
    position: absolute;
    left: 0;
    width: 30px;
    height: 4px;
    background-color: var(--bcp-invert-ink);
}

.menu-toggle::before { top: 0; }
.menu-toggle::after  { bottom: 0; }

.menu-toggle:hover {
    opacity: .7;
}

.menu-toggle:focus-visible {
    outline: 2px solid var(--bcp-accent);
    outline-offset: 4px;
}

@media (max-width: 767px) {
    .site-branding {
        padding: 31.25px 35px 31.25px 0;
    }

    /* The wordmark is capped, and the cap is the owner's, not the theme's: it
       lives in the "Additional CSS" inline <style> of every rendered page —
       reference/rendered/home.html:166-173, identical in all forty — as

         @media only screen and (max-width:767px){
           #masthead > div.header-wrapper.invert > div > div > div > div > a > img
             { width: 340px; }
         }

       No file under reference/www/ contains it, so the theme stylesheet alone
       says the image is free to fill the row, which is what the rebuild did.
       The cap holds the header at a constant 93.52px from 544px to 767px;
       without it the header grew with the viewport and was 33.03px too tall at
       767. Below 544 the row is narrower than 340 anyway and the reset's
       `img { max-width: 100% }` takes over — at 375 both sides render the
       wordmark 310px wide, which is why the earlier two-viewport check missed
       this. */
    .site-logo__link img {
        width: 340px;
    }

    .menu-toggle {
        display: block;
    }

    /* The negative margins are production's, style.css:2549-2552: the open list
       is pulled 15px left of the container gutter. Measured on production at
       375px, open: the <ul> sits at x 0 and is 345 wide, i.e. it clears the
       left gutter and stops 30px short of the right edge. Not symmetric, and
       not a mistake to tidy up — it is what the site does. */
    .main-navigation .menu {
        display: none;
        margin-left: calc(var(--bcp-gutter) * -1);
        margin-right: calc(var(--bcp-gutter) * -1);
    }

    .menu-toggle:checked ~ .menu {
        display: block;
    }

    /* No `display` rule on the items on purpose. Below 768px production leaves
       `li` at its default (style.css:2350-2351 sets only position and
       text-align); its `display: inline-block` lives in the min-width:768px
       block, style.css:2394-2397. Measured on production at 375px with the
       menu open: both items are `list-item`, 345 wide, stacked at y 90.78 and
       149.97. The desktop row is rebuilt as flex below, which blockifies the
       items anyway, so nothing here needs the inline-block. */
}

@media (min-width: 768px) {
    /* Two rules, not one. The theme sets the header row's padding at 768px
       (style.css:3554-3556, `.header-container { padding: 30px 0 11px }`) and
       replaces it only at 1200px (style.css:3557-3559,
       `.site-header.minimal .header-container { padding: 23px 0 }`). The
       rebuild had carried the 1200px value from 768px up, which made the
       header 5px too tall and started the row inside it 7px too high, on every
       page at every width from 768 to 1199. The 1200px half is in the
       min-width:1200px block below.

       The `.site-header.minimal` prefix on the second rule is dropped on
       purpose: it is the theme's way of scoping the step to this header
       layout, every one of production's forty mastheads carries
       `class="site-header minimal container"`, and this shell has exactly one
       header. Written flat, the two media queries reproduce the same computed
       padding without the markup needing the class.

       THESE TWO BLOCKS MUST STAY IN THIS ORDER. Flattening the selector traded
       production's specificity win — 0-3-0 for `.site-header.minimal
       .header-container` against 0-1-0 for `.header-container` — for a
       source-order win. At 1200 and up both media queries match, at equal
       specificity, and the only thing that makes 23px beat 30px 0 11px is the
       min-width:1200px block sitting BELOW this one. Move either block and the
       header silently reverts to the 5px-too-tall bug this comment describes,
       with no selector left to signal the intent. */
    .header-container {
        padding: 30px 0 11px;
    }

    .header-container_wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .main-navigation .menu {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .main-navigation .menu > li {
        flex-grow: 1;
        text-align: center;
    }

    .main-navigation .menu > li > a {
        padding: 1em 0;
    }

    .main-navigation .menu > li > a::after {
        bottom: 16px;
    }
}

@media (min-width: 992px) {
    .main-navigation .menu {
        width: 70%;
        margin: 0 0 0 auto;
    }
}

@media (min-width: 1200px) {
    /* The second half of the header-row padding step — style.css:3557-3559,
       `.site-header.minimal .header-container { padding: 23px 0 }`. See the
       min-width:768px block above for why the selector is written flat, and
       note that this block MUST stay below that one: both match from 1200px
       up, at equal specificity, so source order is the only thing deciding
       which padding wins. */
    .header-container {
        padding: 23px 0;
    }

    .site-branding {
        display: inline-block;
        padding: 3px 0;
    }

    .main-navigation .menu {
        width: 54%;
    }
}


/* -----------------------------------------------------------------------------
   Breadcrumbs

   Every page except the home page carries this strip between the header and
   the content. Markup:

     <nav class="breadcrumbs" aria-label="Breadcrumb">
       <div class="container">
         <div class="breadcrumbs__wrap"><a class="breadcrumbs__item-link" href="/">Home</a><span class="breadcrumbs__item-sep">|</span><span class="breadcrumbs__item-target">Contacts</span></div>
       </div>
     </nav>

   The items sit on one source line on purpose: production's are separate
   floated boxes with no white space between them, so a newline here would add
   a word space the live site does not have.

   The inner `.container` in that sketch belongs to the 4 pages whose #content
   is bare `site-content` — the home page, /contacts/, /gallery/ and
   /reservations/. On the other 35, #content itself carries `container` and
   ALREADY supplies the cap and the gutter, so the strip goes straight into it:

     <nav class="breadcrumbs" aria-label="Breadcrumb">
       <div class="breadcrumbs__wrap">…</div>
     </nav>

   Nesting a second `.container` there would inset the trail by another 15px
   and put it 15px right of production's. Checked per page against
   reference/rendered/<slug>.html, never inferred from a sibling.
   -------------------------------------------------------------------------- */

/* Padding rather than a margin on the inner wrap: an inner margin would
   collapse straight out through .container and cost the strip 9px of height.

   The .25em is production's `.breadcrumbs__wrap { margin: .25em 0 }` at
   style.css:2830-2835, and that rule lives INSIDE `@media (min-width: 992px)`,
   so the same query has to guard it here. Measured on live production at eight
   widths — .breadcrumbs is 24px tall at 543/766/767/980/990/991 and 33px at
   1199/1440 — which is the whole of the difference between the two blocks
   below. Without the query the strip is 9px too tall on 39 of the 40 pages at
   every width under 992px, and everything below it on the page is 9px low.
   (Corrected in Task 6; the home page has no `.breadcrumbs` element, so its
   fidelity figure is unchanged by this — see task-6-report.md §3.1.) */
.breadcrumbs {
    margin: 1.2em 0;
}

@media (min-width: 992px) {
    .breadcrumbs {
        padding: .25em 0;
    }
}

.breadcrumbs__wrap {
    color: var(--bcp-accent);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    text-transform: lowercase;
}

.breadcrumbs__item-link {
    color: var(--bcp-ink);
}

.breadcrumbs__item-sep {
    display: inline-block;
    margin: 0 1em;
    color: var(--bcp-ink);
}

.breadcrumbs__item-target {
    color: var(--bcp-accent);
}


/* -----------------------------------------------------------------------------
   Footer

   Two bands: a black widget area of three equal columns, then a #141414 strip
   holding the company line.
   -------------------------------------------------------------------------- */

.site-footer {
    position: relative;
}

.footer-area-wrap {
    background-color: var(--bcp-dark);
}

.footer-area-container {
    color: var(--bcp-dim);
}

.footer-area {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--bcp-gutter) * -1);
    margin-right: calc(var(--bcp-gutter) * -1);
    padding: 60px 0 30px;
    font-size: 16px;
    line-height: 1.56;
}

.footer-area .widget {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0 0 1.8em;
    padding-left: var(--bcp-gutter);
    padding-right: var(--bcp-gutter);
}

/* Not theme CSS: a site-level rule, and the only thing spacing the icons off
   the text they label. */
.footer-icon {
    margin-right: 10px;
}

.widget-title {
    margin: 0 0 .7em;
    color: var(--bcp-invert-ink);
    font-family: var(--bcp-font-body);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

/* Menu widget: amber chevron instead of a bullet. */
.widget_nav_menu ul {
    margin: 0;
    padding: 0;
}

.widget_nav_menu li {
    position: relative;
    padding-left: 1em;
    list-style: none;
}

.widget_nav_menu li + li {
    margin-top: .8em;
}

.widget_nav_menu li::before {
    content: "\f105";
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    color: var(--bcp-accent);
    font: normal normal normal 16px/1.75 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.invert .widget li a {
    color: var(--bcp-invert-ink);
}

.invert .widget li a:hover {
    color: var(--bcp-accent);
}

.footer-container {
    padding: 12.5px 0;
    background-color: var(--bcp-dark-bar);
}

.site-info {
    font-size: 12px;
}

.site-info__flex {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: stretch;
    align-items: center;
    justify-content: space-between;
    margin-left: calc(var(--bcp-gutter) * -1);
    margin-right: calc(var(--bcp-gutter) * -1);
}

.site-info__flex > * {
    padding: 5px var(--bcp-gutter);
    text-align: center;
}

@media (min-width: 768px) {
    .footer-area {
        padding: 100px 0 116px;
    }

    /* 33.33333%, from power-builder's grid.css — see the thirds note above
       the builder columns. These widgets are
       `col-xs-12 col-sm-12 col-md-4 footer-area--cols-3 widget`, so `.col-md-4`
       is what governs them; nothing else in the corpus reaches them. The
       theme's own 33.3333333333% rounds a column up to 240.00px in a 720px
       row where production draws 239.984375, which is what re-rasterised the
       footer text at 991px. */
    .footer-area .widget {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }

    .site-info__flex {
        flex-direction: row;
    }
}

@media (min-width: 1200px) {
    .widget_nav_menu li {
        padding-left: 2.5em;
    }
}


/* -----------------------------------------------------------------------------
   Icon font

   Only the glyphs the footer actually draws. The theme loads all of
   FontAwesome 4.6; adding a rule here is cheaper than shipping its stylesheet.
   -------------------------------------------------------------------------- */

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa-lg {
    font-size: 1.33333333em;
    line-height: .75em;
    vertical-align: -15%;
}

.fa-map-marker::before  { content: "\f041"; }
.fa-phone::before       { content: "\f095"; }
.fa-facebook::before    { content: "\f09a"; }
.fa-envelope::before    { content: "\f0e0"; }
.fa-instagram::before   { content: "\f16d"; }
/* Added by Task 6 for the pagination's "Next page" link, below. */
.fa-angle-right::before { content: "\f105"; }
/* And by Task 7 for its "Previous page" twin: /menu/page/2/, /3/ and /4/ each
   carry one, and /eventi/ — the only other paginated page — was dropped before
   its page 2 was ever built, which is why Task 6 needed only the right angle. */
.fa-angle-left::before  { content: "\f104"; }


/* -----------------------------------------------------------------------------
   Pagination

   Moved above the divider by the Task 6 follow-up. These rules were written
   for /eventi/ and lived in that page's own section; /eventi/ has since been
   dropped from the reproduced set, and deleting its section would have taken
   the pagination with it. They are the THEME's shared component, not a page
   detail, and they are deliberately not namespaced: `/menu/` (Task 7) is the
   only other page in the thirty-nine that carries them
   (`grep -l 'class="page-numbers' reference/rendered/*.html` returns
   eventi.html and menu.html and nothing else) and its archive pagination is
   the same markup with the same values — 1, 2, …, 4 instead of 1, 2, …, 5.
   Reuse these rules there rather than declaring a second copy under a `menu-`
   prefix; the two would drift.

   Values, from style.css:2758-2795:
     .pagination          margin -.5em 0 5.5em, centred
     .page-numbers        inline-block, 0 5px 5px, and 0 20px 5px from 1200px,
                          uppercase, weight 400, line-height 1.5
     .page-numbers.next   margin-right 0; floats right and gains 3px of top
                          margin from 768px; its icon's left margin steps
                          10px -> 27px at 1200px

   `.page-numbers.next { margin-right: 0 }` is declared ONCE, outside every
   query, exactly as production declares it. It does not need repeating inside
   the 1200px block: the `margin: 0 20px 5px` shorthand there is `.page-numbers`
   at (0,1,0) and this is (0,2,0), so specificity keeps margin-right at 0 in
   that band without any help. Production has no such re-declaration either.

   Colour comes from the customizer's inline block rather than any .css file:
   `.page-numbers { color: #1b1b1b }`, `a.page-numbers:hover,
   .page-numbers.current { color: #ffae13 }`. The hover half needs nothing
   here — the shell's `a:hover` already resolves to the same accent.

   TASK 7 ADDED THE `.prev` HALF, above the divider, in this block. It is
   production's own (style.css:2786-2795), the exact mirror of `.next`
   immediately above it, and it was missing only because /eventi/ page 1 —
   the page Task 6 ported these rules from — has no previous page to link to.
   /menu/page/2/, /3/ and /4/ each carry one, so the component was incomplete
   rather than deliberately trimmed. Declaring it under a `menu-` prefix below
   the divider would have split one theme component across the divider, which
   is exactly what the note above says not to do. It is strictly additive and
   cannot reach another page: `/menu/` is the only paginated page left in the
   reproduced set, so nothing else in `src/` carries a `page-numbers` class.

     .page-numbers.prev   margin-left 0; floats LEFT from 768px and gains the
                          same 3px of top margin (production declares that one
                          for `.next, .prev` together); its icon's right margin
                          steps 10px -> 27px at 1200px
   -------------------------------------------------------------------------- */

.pagination {
    margin: -.5em 0 5.5em;
    text-align: center;
}

.page-numbers {
    display: inline-block;
    margin: 0 5px 5px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}

.page-numbers.current {
    color: var(--bcp-accent);
}

.page-numbers.next {
    margin-right: 0;
}

.page-numbers.prev {
    margin-left: 0;
}

.page-numbers.next i {
    margin-left: 10px;
}

.page-numbers.prev i {
    margin-right: 10px;
}

@media (min-width: 768px) {
    .page-numbers.next {
        float: right;
        margin-top: 3px;
    }

    .page-numbers.prev {
        float: left;
        margin-top: 3px;
    }
}

@media (min-width: 1200px) {
    .page-numbers {
        margin: 0 20px 5px;
    }

    .page-numbers.next i {
        margin-left: 27px;
    }

    .page-numbers.prev i {
        margin-right: 27px;
    }
}


/* =============================================================================
   Page-specific rules. One section per page, introduced by a comment naming
   it. Nothing below this line belongs to the shared shell.
   ============================================================================= */


/* 404 -------------------------------------------------------------------- */

.error-404 {
    padding-top: 100px;
    padding-bottom: 116px;
    text-align: center;
}

.error-404 .page-title {
    margin-bottom: 20px;
}


/* home ----------------------------------------------------------------------

   The front page. Production builds it with the "power-builder" page builder:
   five full-bleed sections inside #tm_builder_outer_content, each one a
   .container > .row > .column stack, with the builder's per-module settings
   emitted as an inline <style> block in the document head. None of that is
   ported. Every number below was read with getComputedStyle off
   https://bastiancontrarioparma.it/ at 1440x900 and 375x720, plus a width
   sweep at 375/480/544/600/767/768/769/800/900/980/981/991/992/1024/1199/
   1200/1440 to place the breakpoints, and src/index.html is written so those
   numbers fall out of as few rules as possible.

   The home page is a builder page, so <main> carries `builder-content`, and
   its #content carries no `container` — it is one of the five reference pages
   that does not.

   Selectors are namespaced `home-`. Where a rule has to beat one of the
   shared `.builder-content` rules above the divider — those are class + type,
   specificity (0,1,1) — it is written with two classes so it wins on
   specificity rather than on source order, because source order stops being a
   guarantee the moment Tasks 6-9 append below this section.

   The row/column primitive this page is built on is NOT home-specific and
   lives above the divider as `.builder-row` / `.builder-col`. The
   `home-row--*` rules below are only this page's own modifiers of it.

   Media renamed on the way out of wp-content/uploads:
     logo.png                2022/07/BC-logo-scritta.png   (shared with the header)
     portrait-pub.png        2022/10/302406817_506566191471312_475207275068891269_n.png
     portrait-produzione.png 2022/11/139189ca-61ba-4841-967c-5699e5e88dc5-1024x1024-modified.png
     miss-matilda.png        2022/09/miss-matilda-480x380.png
     volo-via.png            2022/09/volo-via-480x380.png
     agosto-1922.png         2022/09/agosto-1922-480x380.png
     another-dream.png       2022/09/anotherdream-480x380.png
     primal-bliss.png        2022/09/primal-bliss-480x380.png
     birkermaier.png         2022/09/birkermaier-480x380.png
     dusky-treat.png         2022/11/dusky-treat-976x1024-modified-480x380.png
     lapse-of-mind.png       2022/11/41be8c37-a4ef-487e-a9eb-63c661e29bd6-modified-1-480x380.png
     decana.png              2022/11/769e2d8a-92ab-46ae-9949-d136157444f0-modified-1-480x380.png
     band-beer.jpg           2016/04/ezgif.com-gif-maker.jpg
     taps.jpg                2015/11/11720803_10206919132247093_1098063825_o-1.jpg
     video/hero.mp4          2023/05/bastian-contrario-presentazione.mp4
   Pub and Beer Truck really do share one portrait file on production. The two
   section backgrounds cannot go through <picture>, so they take their webp
   through image-set() with the original left as a plain url() fallback for
   browsers that do not parse it.
   -------------------------------------------------------------------------- */


/* Two rows production insets from the container once there is room: the
   "Eccoci" heading by 150px a side, the gallery button by 185px. Both are
   per-row builder settings, and both only take effect from 981px. */
@media (min-width: 981px) {
    .home-row--heading {
        padding-left: 150px;
        padding-right: 150px;
    }

    .home-row--gallery {
        padding-left: 185px;
        padding-right: 185px;
    }
}


/* Hero ---------------------------------------------------------------------

   A dark band with the wordmark centred on it and a looping video behind.
   Production drives the video through mediaelement.js, which sizes and
   centres it to cover the section; `object-fit: cover` is the same result
   without the script. `muted` and `playsinline` are not in production's
   markup — production relies on the player to start it — but without them no
   current browser will autoplay, so they are the price of dropping the JS. */
.home-hero {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 70px 0;
}

@media (min-width: 768px) {
    .home-hero {
        padding: 145px 0;
    }
}

/* #222 is the page builder's own video-background colour. It is what shows
   wherever the video does not paint: before it loads, and in any browser with
   no H.264 decoder — which includes the Chromium that tools/shot.sh drives,
   so this colour is what both sides of the visual diff actually compare. */
.home-hero__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #222;
}

.home-hero__video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Positioned, so that it paints above the absolutely-positioned video layer.
   Production gets the same stacking from `position: relative` on every
   builder column. */
.home-hero__inner {
    position: relative;
}

/* line-height 0 so the inline image contributes no leading: the wrapper is
   exactly the 73px the logo is tall. */
.home-hero__logo {
    margin-bottom: 50px;
    line-height: 0;
    text-align: center;
}

/* An <hr> that draws nothing. Production's builder puts a "space" divider
   module here; its rules give the element a height, no border, and
   `content: none` on the pseudo-element that would otherwise draw the rule. */
.home-hero__space {
    height: 1px;
    margin: 0;
    border: 0;
    overflow: hidden;
}

@media (min-width: 981px) {
    .home-hero__space {
        height: 50px;
    }
}

/* The three places ---------------------------------------------------------

   #fefef6 is a per-section background the builder emits inline; it is two
   shades off the page's own #fffde7 and is not part of the palette, so it
   stays a literal here. */
.home-places {
    position: relative;
    z-index: 1;
    padding-bottom: 67px;
    background-color: #fefef6;
}

/* Production ships this list twice and picks one with display:none — the
   compact version without quotes below 768px, the heading plus the quoted
   version from 768px up. Both are in the markup, as they are on production. */
.home-row--heading,
.home-row--places {
    display: none;
}

@media (min-width: 768px) {
    .home-row--compact {
        display: none;
    }

    .home-row--heading,
    .home-row--places {
        display: flex;
    }
}

/* Production draws the portrait as a background-image on an empty div. An
   <img> with object-fit renders the identical 90px circle and can be served
   through <picture>, so it is an <img> here. */
.home-card__portrait {
    display: block;
    width: 90px;
    height: 90px;
    margin: 0 auto 20px;
    border-radius: 50%;
    object-fit: cover;
}

.home-card .home-card__name {
    margin: 0;
    color: var(--bcp-secondary);
    font-weight: 700;
    text-align: center;
}

/* No hover colour on purpose: measured on production, this link stays
   #2b2f3e under the pointer while the tap-list links below go amber. */
.home-card .home-card__name a {
    color: inherit;
}

.home-card .home-card__meta {
    margin: 0;
    color: var(--bcp-muted);
    font-size: 14px;
    line-height: 1.56;
    text-align: center;
}

.home-card .home-card__quote {
    position: relative;
    max-width: 770px;
    margin: 53px 0 27px;
    font-weight: 700;
}

.home-card .home-card__quote p {
    margin: 0;
}

.home-card .home-card__quote::before {
    content: "\201C";
    position: absolute;
    top: -50px;
    left: 0;
    width: 30px;
    height: 60px;
    color: var(--bcp-accent);
    font: 700 60px/60px serif;
}

/* 17px, not the 15px production sets on this module: with no quote under it
   the card's last child is the address, whose own 10px and its wrapper's 17px
   collapse out through production's four nested testimonial divs, and 17 wins
   over 15. Measured gap between compact cards at 375px: 17.0px. */
.home-row--compact .home-card {
    margin-bottom: 17px;
}

/* ...except the FIRST one, which production gives its own two-step margin —
   two more per-module builder settings on the same module:

     (base)                    margin-bottom: 0px  !important
     @media (max-width: 61.9em)  margin-bottom: 40px !important   990.4px
     @media (max-width: 47.9em)  margin-bottom: 15px !important   766.4px

   The compact row is itself hidden from 768px, so the only widths where the
   40px step is visible are 766.4px to 767.99px — at integer viewport widths,
   exactly 767. Measured there: production 40px, this page 17px before this
   rule. Tiny, but it is the kind of gap a breakpoint sweep misses by landing
   on the round numbers, so it is written out rather than rounded away.

   17px rather than production's authored 15px below 47.9em, for the same
   collapsing reason as the rule above. */
@media (max-width: 61.9em) {
    .home-row--compact .builder-col:first-child .home-card {
        margin-bottom: 40px;
    }
}

@media (max-width: 47.9em) {
    .home-row--compact .builder-col:first-child .home-card {
        margin-bottom: 17px;
    }
}

/* A per-module setting of production's: the first quoted card keeps a bottom
   margin until the columns are wide enough not to need it. 61.9em is the
   builder's own breakpoint, 990.4px. */
@media (max-width: 61.9em) {
    .home-row--places .builder-col:first-child .home-card {
        margin-bottom: 40px;
    }
}


/* Section headings ---------------------------------------------------------

   The two flourishes either side of a heading. The theme carries them as one
   26x18 data-URI PNG (style.css:1588-1601) mirrored for the right-hand side,
   and only shows them from 992px up. The bytes below are that image with its
   1.5 KB of Photoshop XMP metadata stripped: `magick compare -metric AE`
   against the theme's original is 0. */
.home-heading {
    position: relative;
    text-align: center;
}

.home-heading--places {
    margin: 60px 0;
}

.home-heading--taps {
    margin-bottom: 50px;
}

.home-heading h2::before,
.home-heading h2::after {
    content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAASCAQAAADvEAYoAAABU0lEQVQoz5XSy0sUABDH8c++xcv2cCNECO2SlxK6dLBLUKSJXk2kEKmbFfT4BzoECh66FHSJToHQ/yBdykOsr5sPFo+rSKaitDUdXAvEzd3fZRhmvjPMI6WWnrlqRgMqmBI2nW0EypsTwsf60ps8lUebJSGMnIxcNifM6sA5X4V9N06ChvwQwncPJDR7K2y7WSs9KwFaTdgQQtGgjAElFS9lwAVDLh0iHYpWjbvlDLL6vFMS1r33yLTwzR3d9oSKkQTueS3/t+eqWcvWlBV0ufavsn05UE5Kaas6B0pJS0tKqNj185hR0gem07ySST1akNHrjRVhwwePfRaK+l23J/wydkjnJMF548rVRQzL6lFS8aq6iHb3XTna+K4tIWx5KCln0m87bv//Tl0WhHkXcdp0fcelyXOnULAohNH6H7bZFyFMNfLlLT4Jmwoa1AtPaoX+AFrpaNdd1ctnAAAAAElFTkSuQmCC");
    display: none;
    margin-right: 20px;
    line-height: 0;
    vertical-align: middle;
}

.home-heading h2::after {
    margin-right: 0;
    margin-left: 20px;
    transform: rotateY(180deg);
}

@media (min-width: 992px) {
    .home-heading h2::before,
    .home-heading h2::after {
        display: inline-block;
    }
}


/* What is on tap ---------------------------------------------------------- */

.home-taps-section {
    position: relative;
    z-index: 1;
    padding: 85px 0 42px;
}

/* The plugin's grid is three thirds in a flex row offset by a 1px negative
   margin that hides its own rounding. Reproduced rather than tidied away:
   without it every image in the row moves by up to 0.6px. */
.home-taps__row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1px;
}

.home-taps__item {
    position: relative;
    width: 100%;
    margin-bottom: 55.8px;
    padding-top: 70px;
    padding-left: 1px;
}

/* 33.33%, the theme's own literal for this grid (its builder columns use
   33.33333%). The two differ by 0.05px on a 1171px row, and matching the
   literal is cheaper than explaining the difference. */
@media (min-width: 768px) {
    .home-taps__item {
        width: 33.33%;
    }
}

.home-taps__link {
    display: block;
}

/* No width/height in CSS: the intrinsic ratio comes from the img element's
   own width/height attributes, which is what makes six of these render square
   (371x371 files) and three render 480x380. */
.home-taps__image {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 18px;
}

/* The hover lift, style.css:6683-6689, and the `will-change` that goes with
   it. The hint is not decoration: it puts each image on its own compositing
   layer, and Chromium rasterises a scaled image differently there. Without it
   these nine upscaled labels differ from production by 459 167 pixels of
   edge-resampling noise; with it the whole band is pixel-identical. */
.home-taps__link img {
    transition: .3s;
    will-change: transform;
}

.home-taps__link:hover img {
    transform: scale(1.1) translateY(-20px);
}

.home-taps__desc {
    padding: 0 15px;
}

@media (min-width: 1200px) {
    .home-taps__desc {
        padding: 0 50px;
    }
}

/* h5 at 18px, not the 22px the shared h5 rule gives it: the plugin overrides
   the theme here, and so does this. */
.home-taps .home-taps__title {
    margin: 0 0 8px;
    overflow: hidden;
    font-family: var(--bcp-font-body);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.55;
    text-align: center;
}


/* The photograph band ------------------------------------------------------

   A strip of page with nothing in it but a background image. Its inner height
   is three empty paragraphs' worth of line box — production's own empty
   call-to-action module — so the markup keeps the three paragraphs and this
   rule only takes their margins off. */
.home-band {
    position: relative;
    z-index: 1;
    padding: 140px 0 55px;
    background-image: url(/assets/img/band-beer.jpg);
    background-image: image-set(url(/assets/img/band-beer.webp) type("image/webp"),
                                url(/assets/img/band-beer.jpg) type("image/jpeg"));
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--bcp-invert-ink);
}

.home-band .home-band__filler p {
    margin: 0;
}


/* Gallery call to action ---------------------------------------------------

   Production animates this background with a parallax script that translates
   an oversized copy of the image as the page scrolls. With the script gone,
   the plugin's own static rule for that layer applies — 100% x 100% of the
   section, cover, anchored top centre — which is what is reproduced here. */
.home-gallery {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 150px 0;
    background-image: url(/assets/img/taps.jpg);
    background-image: image-set(url(/assets/img/taps.webp) type("image/webp"),
                                url(/assets/img/taps.jpg) type("image/jpeg"));
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}

.home-gallery__wrap {
    text-align: center;
}

/* Two classes: the section carries `invert`, and `.invert a` would otherwise
   paint the label white on white. `translateZ(0)` is production's, and it is
   load-bearing — it makes the button a stacking context so the white disc
   below sits above the amber background but under the label. */
.home-gallery .home-gallery__button {
    position: relative;
    display: grid;
    place-items: center;
    width: 130px;
    height: 130px;
    margin: 0 auto;
    padding: 25px;
    border-radius: 50%;
    background-color: var(--bcp-accent);
    color: var(--bcp-dark);
    font-family: var(--bcp-font-display);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-transform: lowercase;
    transform: translateZ(0);
}

/* The white disc. On hover it scales away and the amber underneath shows. */
.home-gallery .home-gallery__button::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: 100%;
    background-color: var(--bcp-invert-ink);
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform .25s;
}

/* The dashed ring, 14px clear of the disc. */
.home-gallery .home-gallery__button::after {
    content: "";
    position: absolute;
    top: -14px;
    right: -14px;
    bottom: -14px;
    left: -14px;
    border: 2px dashed var(--bcp-invert-ink);
    border-radius: 50%;
    transition: transform .25s;
}

.home-gallery .home-gallery__button:hover::before {
    transform: scale(0);
}

.home-gallery .home-gallery__button:hover::after {
    transform: rotate(180deg);
}


/* venue pages — /pub/, /birrificio-produzione/, /food-truck/ ----------------

   Production builds these from the same three module types (a text block, a
   Google Maps embed, a row of photographs) and the only class it gives them
   that is not shared with the rest of the site is `.page-gallery`, which
   appears on four pages and nowhere else in the forty:

       $ grep -c 'class="[^"]*page-gallery' reference/rendered/*.html
       pub 5, birrificio-tap-room 3, birrificio-produzione 3, food-truck 2,
       every other page 0

   FOUR THERE, THREE HERE. /birrificio-tap-room/ was the fourth venue page;
   Task 9b removed it from the rebuild as a zero-inbound-link orphan. The count
   above is deliberately left as it was — it greps production's rendered
   corpus, not src/, so it still returns four and the evidence still holds.
   The rules below never depended on which of them was present.

   (The literal string `page-gallery` appears in all forty because the owner's
   "Additional CSS" block is printed into every document; only those four
   carry an ELEMENT with the class.) So the rules are named `venue-` once
   rather than copied under a prefix per page that would drift apart. Nothing
   in Tasks 7-9 uses them.

   Where the values come from — all three sources, because two of the four
   rules below exist in no stylesheet file at all:

     theme       style.css:5204-5267           the Gallery button
     Additional  the inline <style> the owner types into the customizer,
     CSS         present in every rendered page and in no .css file:
                   iframe { width: 100% }
                   .page-gallery { margin-top: 15px }
                   .page-gallery .tm_pb_column_1_4 { display: grid;
                                                     place-items: center }
     per page    each page's own builder <style>: `.tm_pb_button_0 {
                 display: none !important }` from 768px on the two brewery
                 pages, and `margin-left: 0` on every image module.

   Everything below was then read back off live production with
   getComputedStyle at 543/766/767/980/990/991/1199/1440.

   All four pages carry `class="site-content container"` on #content — checked
   individually against each reference page, not copied from a sibling — so
   <main> is already inside the container and the rows sit directly in it, with
   no `.container` of their own.

   Media. Every photograph is production's own full-size upload, copied
   unchanged, with a webp derivative beside it and served webp-first through
   <picture> — except pub/07 and food-truck/05, whose derivatives came out
   LARGER than the JPEG (106% of it in both cases) and are therefore neither
   shipped nor offered; those two <picture> elements carry the <img> alone.
   Any page task adding a photograph must check the derivative's size against
   the original before writing the <source>, not assume webp is smaller.
   Files are numbered by their position on the page; the mapping to
   the source tree (paths are relative to the extracted uploads directory) is:

     pub/menu-link.jpg  2022/10/IMG-20231112-WA0022.jpg   (the tap-list link)
     pub/01.jpg         2022/11/IMG-20220928-WA0103.jpg
     pub/02.jpg         2022/11/IMG-20220928-WA0081.jpg
     pub/03.jpg         2022/11/IMG-20220928-WA0101.jpg
     pub/04.jpg         2022/11/IMG-20220928-WA0106.jpg
     pub/05.jpg         2015/11/1-1.jpg
     (position 06)      2015/11/11720803_10206919132247093_1098063825_o-1.jpg
                        — already in the tree as /assets/img/taps.jpg, which
                        the home page's gallery band uses. Reused rather than
                        copied twice, so pub/ has no 06.
     pub/07.jpg         2015/11/11193341_705932959535170_4352152980740585089_n-1.jpg
     pub/08.jpg         2015/11/fb1-1.jpg
     pub/09.jpg         2022/10/IMG-20221130-WA0021.jpg
     pub/10.jpg         2022/11/IMG-20220928-WA0085.jpg
     pub/11.jpg         2022/10/IMG-20221130-WA0026.jpg
     pub/12.jpg         2022/10/IMG-20221130-WA0027.jpg
     pub/13.jpg         2022/10/IMG-20221130-WA0024.jpg
     pub/14.jpg         2022/10/IMG-20221130-WA0029.jpg
     pub/15.jpg         2022/10/IMG-20221130-WA0023.jpg
     pub/16.jpg         2022/10/IMG-20221130-WA0028.jpg
     pub/17.jpg         2022/10/IMG-20221130-WA0025.jpg
     pub/18.jpg         2022/11/IMG-20220928-WA0105.jpg
     pub/19.jpg         2022/10/IMG-20221130-WA0030.jpg
     tap-room/01..04    2022/11/IMG-20220928-WA00{84,76,71,91}.jpg
     tap-room/05..11    2022/10/IMG-20221130-WA00{42,48,49,50,51,55,54}.jpg
     produzione/01..04  2022/11/IMG-20220928-WA00{78,90,96,97}.jpg
     produzione/05..12  2022/10/IMG-20221130-WA00{32,33,34,37,35,44,38,39}.jpg
     food-truck/01..03  2022/11/{20250406_093649-1,20250406_093640-1,20240915_181237-1}.jpg
     food-truck/04..05  2022/11/{20240719_230531-1,20240719_190328-1}.jpg

   One thing production does that this rebuild deliberately does not: every
   image module is `opacity: 0` until a scroll waypoint fires and animates it
   in. That needs JavaScript, so here the photographs are simply visible. It
   is also why production's own full-page screenshots of these four pages show
   empty space where the photographs are — see task-6-report.md §2.5.
   -------------------------------------------------------------------------- */

/* The Google Maps embed. `iframe { width: 100% }` in the owner's Additional
   CSS is what stretches it to the column; the 450px height is the element's
   own attribute, and the paragraph around it is 457.08px because an inline
   replaced element sits on the text baseline. Scoped to a class here rather
   than left on the bare `iframe` type so it cannot reach an embed a later
   task adds. */
.venue-map {
    width: 100%;
    border: 0;
}

/* A row of photographs. 15px of separation from whatever is above it, and —
   for the four-up rows only — each column is a grid that centres its
   photograph VERTICALLY, so a short one sits in the middle of a row whose
   height a taller one set. /food-truck/'s three-up and two-up rows are NOT
   grids on production (the owner's rule names `.tm_pb_column_1_4`), so its
   photographs are top-aligned, and the scope here matches.

   `justify-items: start`, where production writes `place-items: center`,
   because production's grid ITEM also carries `margin-left: 0` from the
   page's own builder <style> over the builder's own `margin: 0 auto`, and an
   auto inline margin beats `justify-items`. So the item ends up centred
   vertically and flush LEFT — which only shows on a photograph narrower than
   its column, i.e. below 768px where the columns are full width. Measured on
   production at 767: pub/07.jpg is 540px inside a 546px column at x=110.5,
   the column's left content edge, not the 113.5 that centring would give. */
.venue-gallery {
    margin-top: 15px;
}

.venue-gallery .builder-col--quarter {
    display: grid;
}

/* The wrapper round each <picture> is the GRID ITEM, and it is load-bearing:
   a stretched item would fill the column and the alignment below would have
   nothing to do. The alignment is written here, on the item, rather than as
   `align-items`/`justify-items` on the column, so the class earns its name —
   it is otherwise the only class in this file that appears in the markup and
   in no rule. Scoped to the four-up columns because that is the only place a
   grid exists; /food-truck/'s three-up and two-up rows are plain flex columns
   and their items must not be aligned. */
.venue-gallery .builder-col--quarter > .venue-gallery__item {
    align-self: center;
    justify-self: start;
}

/* The Gallery jump button on /birrificio-produzione/. Visible ONLY below
   768px: that page's own builder <style> hides it with
   `display: none !important` in two adjoining queries that cover everything
   from 768px up. /birrificio-tap-room/ carried the same button behind the same
   pair of queries until Task 9b removed it, which is why this rule reads as
   shared and is now used by one page.

   The white panel is production's: a 150%-wide pseudo-element rotated 45
   degrees out of the button's `overflow: hidden` box, which un-rotates on
   hover and wipes across while the label turns black. It sits at `z-index: -1`
   and is still visible because `transform: translateZ(0)` makes the button a
   stacking context, and negative-z descendants paint above their stacking
   context's own background. */
.venue-button {
    position: relative;
    display: inline-block;
    max-width: 100%;
    padding: 12px 30px;
    overflow: hidden;
    border: none;
    border-radius: 3px;
    background-color: #000;
    color: var(--bcp-invert-ink);
    font-family: var(--bcp-font-display);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    transform: translateZ(0);
    /* `all .2s cubic-bezier(.2, 1, .3, 1)`, in two halves because production
       assembles it in two: power-builder's
       `#tm_builder_outer_content .tm_pb_button { transition: all 0.2s }`
       (framework/assets/css/style.css) sets the property and the duration, and
       the theme's higher-specificity
       `div.entry-content #tm_builder_outer_content .tm_pb_button`
       (style.css:5223-5224) overrides the timing function alone. Measured on
       live production: all / 0.2s / cubic-bezier(0.2, 1, 0.3, 1). The
       duration has to be stated here — without it the button would keep the
       .3s the shell's `a { transition: .3s }` gives every link. */
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.2, 1, .3, 1);
    will-change: transform;
}

.venue-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 150%;
    height: calc(100% + 2px);
    background-color: transparent;
    transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
    transform-origin: 0 100%;
    transition: transform .3s, opacity .3s, background-color .3s;
}

/* Two classes' worth of specificity, so this beats the shell's `a:hover`
   (0,1,1) on specificity rather than on source order. The inset shadow is
   production's: measured under the pointer on live production the button
   reports `rgb(255,255,255) 0px 0px 0px 2px inset` and `color: rgb(0,0,0)`,
   from the customizer's
   `.tm_pb_button:hover { box-shadow: inset 0 0 0 2px #fff; color: #000000 }`
   — a rule that exists in no stylesheet file, only in the inline <style> the
   customizer prints into every page. */
.venue-button:hover {
    box-shadow: inset 0 0 0 2px #fff;
    color: #000;
}

/* Production fades the panel in from transparent as it un-rotates, which is
   what the `background-color .3s` in the transition above is for; measured on
   live production, `::before` is rgba(0,0,0,0) at rest and rgb(255,255,255)
   under the pointer. Painting it white at rest would look the same standing
   still and different for the 0.3s in between. */
.venue-button:hover::before {
    background-color: #fff;
    transform: rotate3d(0, 0, 1, 0deg);
}

@media (min-width: 768px) {
    .venue-button {
        display: none;
    }
}


/* menu item ------------------------------------------------------------------
   The 27 /menu/<slug>/ pages. Production builds them from the MotoPress
   Restaurant Menu plugin's single-item template, and the class names here are
   the plugin's own (`mprm-*`) rather than a rebuild coinage — the shell's own
   note above the divider already names `mprm-header-title` as the form the
   item pages' <h1> takes, and keeping the rest of the family lets every rule
   below be checked line-for-line against reference/rendered/menu_<slug>.html.
   No other page in the reproduced set carries an `mprm-` class, so every rule
   is scoped by `.mprm-main-wrapper` and none of them can reach another page.

   Where the values come from — all read out of the live cascade with
   getComputedStyle + a CSSOM walk over document.styleSheets on
   /menu/bruschetta-parmigiana/ and /menu/birkermaier/, not from
   style.css alone:

     .mp_menu_item                       style.css     position/padding-top 70px
     .hentry / .single .hentry           style.css     margin-bottom 3em
     .mprm-container .mprm-row           plugin        padding-bottom 2em
     .mprm-columns                       plugin        width 100%, float left
     .single-mp_menu_item ...            style.css:5978-6087  the theme's own
                                         overrides of the plugin: column widths,
                                         title size, price size, related items
     .mprm-related-item a .mprm-related-title  customizer inline <style>
                                         (font-family + the amber) — in no .css
                                         file anywhere, only in the page's head

   TWO rules of production's are deliberately NOT ported, because production
   itself cancels them:

   1. `.single-mp_menu_item .mprm-main-wrapper.mp_menu_item .mprm-thumbnail__img
      { width: 100% }` is followed by a second rule at the SAME specificity
      setting `width: auto`, and the later one wins. Measured on
      /menu/birkermaier/: the 371x371 image renders 371x371, NOT stretched to
      the 1170px column. Reasoning from the first rule alone would have blown
      every beer photograph up to 1170x1170.
   2. `.mprm-columns { margin-left: 4% }` (from 769px) never has an effect:
      `.mprm-content` is `:first-child` and gets 0, and `.mprm-sidebar` is
      overridden to 5.99% by the theme from 768px. Only the 5.99% is ported.
   -------------------------------------------------------------------------- */

.mprm-main-wrapper {
    position: relative;
    padding-top: 70px;
    margin-bottom: 3em;
}

/* Nine of the 27 items carry a photograph; the other eighteen have none and
   emit no <figure> at all. `figure` is already margin: 0 from the reset. */
.mprm-main-wrapper .mprm-thumbnail {
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .mprm-main-wrapper .mprm-thumbnail {
        margin-bottom: 2.5rem;
    }
}

@media (min-width: 1200px) {
    .mprm-main-wrapper .mprm-thumbnail {
        margin-bottom: 5.5rem;
    }
}

/* `.content-wrapper` is production's second class on the container div. Scoped
   under `.mprm-main-wrapper` because the bare name is generic enough to
   collide with a later task's markup. */
.mprm-main-wrapper .content-wrapper {
    position: relative;
    margin: 0 0 2rem;
}

.mprm-main-wrapper .mprm-row {
    padding-bottom: 2em;
}

.mprm-main-wrapper .mprm-columns {
    float: left;
    width: 100%;
}

/* The plugin's own clearfix, kept because production keeps it: the empty
   `.mprm-clear` div after the two floated columns is what gives the row its
   height. `.mprm-row::after` would do the same job; both are production's and
   porting one without the other would be a guess about which one acts. */
.mprm-main-wrapper .mprm-row::after,
.mprm-main-wrapper .mprm-clear::before,
.mprm-main-wrapper .mprm-clear::after {
    display: table;
    content: "";
    line-height: 0;
}

.mprm-main-wrapper .mprm-row::after,
.mprm-main-wrapper .mprm-clear::after {
    clear: both;
}

@media (max-width: 768px) {
    .mprm-main-wrapper .mprm-columns {
        padding-bottom: 2em;
    }
}

@media (max-width: 550px) {
    .mprm-main-wrapper .mprm-columns {
        margin-bottom: 2em;
    }
}

@media (min-width: 768px) {
    .mprm-main-wrapper .mprm-content {
        width: 66.66%;
    }

    .mprm-main-wrapper .mprm-sidebar {
        width: 27.35%;
        margin-left: 5.99%;
    }
}

/* 29px, not the 70px the shell gives an <h1>: the theme resets it to
   1.8125rem for this template. Everything else — Amatic SC 700, line-height
   1.07, the 26px bottom margin — is the shell's h1 and is left alone. */
.mprm-main-wrapper .mprm-header-title {
    font-size: 1.8125rem;
}

/* The shell's `p:last-of-type { margin-bottom: 0 }` is what closes the gap
   between the price paragraph and the "You might also like" block below it;
   this zero is production's `.single-mp_menu_item … .mprm-post-content
   { margin-bottom: 0 }`, which replaces the plugin's 2rem. */
.mprm-main-wrapper .mprm-post-content {
    margin-bottom: 0;
}

/* The in-content related list: bare links in a row, one word space apart. */
.mprm-main-wrapper .mprm-post-content .mprm-related-items > a {
    display: inline-block;
}

.mprm-main-wrapper .mprm-sidebar .mprm-price-box,
.mprm-main-wrapper .mprm-sidebar .mprm-related-items {
    margin-bottom: 2.7rem;
}

/* 70px Amatic SC in the accent amber. It is an <h3>, so the shell's h3 gives
   it line-height 1.39 and the 8px bottom margin. */
.mprm-main-wrapper .mprm-price {
    color: var(--bcp-accent);
    font-family: var(--bcp-font-display);
    font-size: 4.375rem;
}

.mprm-main-wrapper .mprm-sidebar .mprm-related-items .mprm-title {
    margin: 0 0 1.3rem;
    padding: 0;
    font-size: 1.8125rem;
}

/* The shell already gives every ul `padding-left: 0` and `list-style: none`;
   only the 3em bottom margin has to go. */
.mprm-main-wrapper .mprm-related-items-list {
    margin: 0;
}

.mprm-main-wrapper .mprm-related-item {
    margin: 0 0 1.5rem;
    padding: 0;
}

.mprm-main-wrapper .mprm-related-item:last-child {
    margin-bottom: 0;
}

/* Shrink-to-fit, so the centred title below centres inside the link's own box
   and not inside the 320px sidebar column. */
.mprm-main-wrapper .mprm-related-item > a {
    display: inline-block;
}

.mprm-main-wrapper .mprm-related-title {
    margin: 0;
    padding: 0;
    color: var(--bcp-accent);
    font-size: .9375rem;
    line-height: 1.66;
    text-align: center;
    text-transform: uppercase;
    transition: .3s;
}


/* menu archive ---------------------------------------------------------------
   /menu/ and its three pagination pages. Production paginates this archive
   EIGHT items to a page — 8 + 8 + 8 + 3 = 27 — not nine; counted off live
   production's own /menu/page/N/ rather than off the slug list.

   The class names are the theme's own (`posts-list`, `post-thumbnail`,
   `entry-*`, `btn-link`), because every rule below is a port of a theme rule
   with the same selector. Three of those names — `.entry-title`,
   `.entry-content`, `.entry-footer` — are generic enough that another page
   could grow one, and on the builder pages `.entry-title` is ALREADY in use
   for the visually hidden <h1>; so every rule here is scoped by `.posts-list`
   or `.posts-list__item`, which nothing outside this archive carries.

   Values read out of the live cascade on /menu/ at 1440px with a CSSOM walk,
   media queries included:

     .hentry                     margin-bottom 3em, 5em from 1200px
     .mp_menu_item               padding-top 70px
     .posts-list:not(.two-sidebars) .hentry
                                 padding 0 20px from 992px
     .posts-list--default.fullwidth .hentry
                                 padding 0 245px from 1200px
     .posts-list--default:not(.two-sidebars) .hentry + .hentry
                                 padding-top 3em (5.8em from 1200px) and a
                                 1px #ebebeb rule above it
     .post-thumbnail             negative margins that cancel the padding, so
                                 the photograph is full-bleed inside the card
     .posts-list .entry-content  display NONE below 768px

   `.hentry + .hentry` beats `.mp_menu_item`'s padding-top on specificity
   (0,4,0 against 0,1,0), so the first card keeps 70px and every later one
   takes 3em/5.8em. Written as `.posts-list__item + .posts-list__item` here.

   The archive is the ONE page of the forty with no <link rel="canonical">;
   pages 2-4 have none either. Verified per page, not inherited from a sibling.
   -------------------------------------------------------------------------- */

.posts-list__item {
    position: relative;
    padding-top: 70px;
    margin-bottom: 3em;
}

.posts-list__item + .posts-list__item {
    padding-top: 3em;
    border-top: 1px solid #ebebeb;
}

@media (min-width: 992px) {
    .posts-list__item {
        padding-right: 20px;
        padding-left: 20px;
    }

    .posts-list__item .post-thumbnail {
        margin-right: -20px;
        margin-left: -20px;
    }
}

@media (min-width: 1200px) {
    .posts-list__item {
        padding-right: 245px;
        padding-left: 245px;
        margin-bottom: 5em;
    }

    .posts-list__item + .posts-list__item {
        padding-top: 5.8em;
    }

    .posts-list__item .post-thumbnail {
        margin-right: -245px;
        margin-left: -245px;
    }
}

/* Only the cards that HAVE a photograph get the gap under it. Eighteen of the
   27 items have none and emit an empty <figure>, exactly as production does —
   which is why the class is on the card and the rule is not just
   `.post-thumbnail`. */
.posts-list__item.has-thumb .post-thumbnail {
    position: relative;
    margin-bottom: 2em;
}

@media (min-width: 992px) {
    .posts-list__item.has-thumb .post-thumbnail {
        margin-bottom: 3em;
    }
}

/* `width: auto` rather than the shell's inherited `max-width: 100%` alone:
   the photograph keeps its intrinsic size and is centred in the full-bleed
   figure, which is why a 371x371 beer label does not stretch to 1170px. */
.posts-list .post-thumbnail--fullwidth {
    display: block;
    text-align: center;
}

.posts-list .post-thumbnail--fullwidth img {
    width: auto;
}

/* 24px, not the shell's 44px h2: the theme resets .entry-title to 1.5rem and
   1.8125rem from 992px. Berkshire Swash 400 and line-height 1.25 stay. */
.posts-list .entry-title {
    margin: 0 0 15px;
    font-size: 1.5rem;
}

@media (min-width: 992px) {
    .posts-list .entry-title {
        font-size: 1.8125rem;
    }
}

/* The excerpt is HIDDEN below 768px. Production's own rule, and it is what
   makes the four narrow gate widths shorter pages rather than wrong ones. */
.posts-list .entry-content {
    display: none;
}

@media (min-width: 768px) {
    .posts-list .entry-content {
        display: block;
    }
}

.posts-list__item .entry-content {
    margin-top: 1.5em;
}

/* 27px, against the shell's 40px, and it applies to the LAST paragraph too —
   the excerpt is one paragraph, so the shell's `p:last-of-type { margin: 0 }`
   would otherwise win and close the gap above the Read more link. */
.posts-list__item .entry-content p,
.posts-list__item .entry-content p:last-of-type {
    margin-bottom: 1.5em;
}

.posts-list .entry-footer {
    position: relative;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
}

/* Amatic SC 16px, uppercase — the theme's own link-button. Scoped to the
   archive because no other page in the reproduced set carries one yet; if a
   Task 8 or 9 page grows a `.btn-link`, promote this above the divider the way
   `.pagination` was rather than declaring a second copy. */
.posts-list .btn-link {
    margin-right: 15px;
    font-family: var(--bcp-font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
}


/* -----------------------------------------------------------------------------
   Gallery — /gallery/

   Two page-builder sections, and neither is shaped like the venue pages'
   photograph rows, so none of `.venue-gallery` is reused here.

   Section 0 is a full-bleed photograph with one line of display type over it.
   Section 1 is sixteen photographs in four rows of four, and the four rows are
   NOT alike: rows 1-3 are `tm_pb_row_fullwidth` — outside any container, on a
   5px gutter — while row 4 sits inside `.container` on the normal 15px gutter.
   That is why this page's #content is bare `site-content` with no `container`
   (reference/rendered/gallery.html:248); the cap lives on the inner
   `.container` elements instead.

   Every figure below was MEASURED on live production rather than read out of a
   stylesheet, because this page's values come from all three of the sources the
   project has been caught trusting singly — the theme, the owner's Customizer
   block, and the page's own `<style id="tm-builder-advanced-style">`. Method
   and numbers are in task-8-report.md §2.

   The photographs themselves need no rules: the shell's own `img` reset
   (site.css:68-74) is already `display: inline-block; max-width: 100%;
   height: auto; vertical-align: top`, which is character-for-character what
   production computes for these sixteen. In particular there is NO `width`, so
   an image narrower than its column is centred at its natural size rather than
   stretched — production renders 03.jpg at 700x467 inside a 767px column at
   767px viewport, and it is the only one of the sixteen that ever reveals the
   rule.
   -------------------------------------------------------------------------- */

/* 345/335 above 980px, then the page's own two `max-width` queries. Measured:
   the section is 834px tall at 1440, which is 345 + 144 + 10 + 335.

   The `url()` + `image-set()` pair is this file's own idiom for a background
   that has a webp derivative — see `.home-band` and `.home-gallery` above. The
   plain `url()` comes first as the fallback for a browser that does not parse
   `image-set`, and it is also what `tools/originals-only.sh` leaves in force
   when it strips the whole `image-set` declaration for a codec-free reading.
   originals-only:prose — hero.webp is 36 418 B against the JPEG's 48 045, so
   wiring it saves a webp-capable visitor 11 627 bytes. */
.gallery-hero {
    padding: 345px 0 335px;
    background-image: url(/assets/img/gallery/hero.jpg);
    background-image: image-set(url(/assets/img/gallery/hero.webp) type("image/webp"),
                                url(/assets/img/gallery/hero.jpg) type("image/jpeg"));
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Production writes these as `@media only screen and (max-width: N)`. `only
   screen` buys nothing in any browser in service and the rest of this file
   does not use it. The 767 block must stay BELOW the 980 one: both apply under
   768px and the later declaration is the one that has to win. */
@media (max-width: 980px) {
    .gallery-hero {
        padding: 200px 0 190px;
    }
}

@media (max-width: 767px) {
    .gallery-hero {
        padding: 150px 0 140px;
    }
}

/* The hero's row is production's `tm_pb_col_padding_reset`: unlike every other
   row on the page it has no negative margin and its column no gutter, so the
   line of type spans the container's content box exactly. Measured at 1440:
   x=135 w=1170, against the container's own 135/1170. */
.gallery-hero__row {
    margin-left: 0;
    margin-right: 0;
}

.gallery-hero__row > .builder-col {
    padding-left: 0;
    padding-right: 0;
}

/* White comes from `.invert` on the section, which is production's own class
   here and resolves to the same #fff its `color: #ffffff !important` does.

   `1.2em`, not a unitless 1.2, because it has to keep computing against the
   font-size in force: 72px at 60px, 60px at 50px, 48px at 40px — all three
   measured. The <p> needs no rule of its own; it inherits the computed
   line-height, and the shell's `.builder-content p:last-of-type` already
   supplies production's 10px bottom margin. */
.gallery-hero__text {
    font-family: var(--bcp-font-display);
    font-size: 60px;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: 17px;
    text-align: center;
    text-transform: uppercase;
}

@media (max-width: 980px) {
    .gallery-hero__text {
        font-size: 50px;
        letter-spacing: 8px;
    }
}

/* `normal`, not `0px`: production declares `letter-spacing: 0px` and Chromium
   reports the computed value as `normal`, which is what was measured at 767. */
@media (max-width: 767px) {
    .gallery-hero__text {
        font-size: 40px;
        letter-spacing: normal;
    }
}

/* Rows 1-3. A 5px gutter instead of the builder's 15px, and a 10px gap below
   each photograph — production's `.tm_pb_row_{1,2,3} { margin: 0 -5px }` with
   `.tm_pb_column_{1..12} { padding: 0 5px 10px }`.

   These rows are wider than the viewport by design: at 1440 the row measures
   x=-5 w=1450. Nothing here clips it, and nothing here needs to — the shell's
   `.site { overflow: hidden }` does, which is why production reports
   scrollWidth == clientWidth == 1440 rather than 1450. Row 4 needs no rules at
   all: production's `.tm_pb_column_{13..16} { padding: 0 15px }` is already
   what `.builder-col` declares. */
.gallery-row--bleed {
    margin-left: -5px;
    margin-right: -5px;
}

.gallery-row--bleed > .builder-col {
    padding: 0 5px 10px;
}

/* `line-height: 0` is load-bearing, not tidiness: the photograph is an
   inline-block, so without it the module keeps a text strut and ends up taller
   than its own image. Production sets the same zero and its module measures
   234.562px against an image of 234.562px.

   `text-align` is the whole of the difference between the two kinds of row.
   Rows 1-3 centre their photograph; row 4 does not, and that only ever shows
   below 768px where a column is wider than the image inside it — measured at
   767, images 13-16 sit at x=110.5, the column's left content edge, while
   image 3 is centred at x=33.5. It is the same left-flush behaviour Task 6
   recorded as `justify-self: start` for the venue pages. */
.gallery-item {
    line-height: 0;
    text-align: center;
}

.gallery-item--plain {
    text-align: left;
}

/* The lightbox affordance. Production runs this from the page builder's
   magnific-popup handler; the Global Constraints forbid a bundled library, so
   the anchor simply points at the full-size original and the page works with
   JavaScript disabled. The anchor is `position: relative` only to give the
   overlay something to sit against — production's is too. */
.gallery-item__link {
    position: relative;
    display: inline-block;
}

/* `opacity: 0` AT REST, which is production's own value, so this contributes
   exactly zero pixels to any gate capture — it is reproduced because it is the
   only signal that a photograph opens. Measured on production: inset 0,
   rgba(0,0,0,0.5), z-index 3, transition .3s. */
.gallery-item__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    background-color: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: .3s;
}

/* `:focus-visible` as well as `:hover` — production has only the hover, but the
   anchor is keyboard reachable and the overlay is its only visible state. It
   changes nothing a mouse user or a screenshot ever sees. */
.gallery-item__link:hover .gallery-item__overlay,
.gallery-item__link:focus-visible .gallery-item__overlay {
    opacity: 1;
}

/* FontAwesome 4.6 f00e, the magnifier. Production centres it with a 55/50 pair
   and a -14px margin rather than a transform; all four values are measured
   (top resolves to 129px against a 234.562px overlay, which is 55%). */
.gallery-item__overlay::before {
    content: "\f00e";
    position: absolute;
    top: 55%;
    left: 50%;
    margin-top: -14px;
    margin-left: -14px;
    color: var(--bcp-invert-ink);
    font: normal normal normal 32px/1 FontAwesome;
}

/* The full-width footer.

   `/gallery/` is the ONLY page of the forty whose footer is not boxed.
   Production's <body> carries `footer-layout-fullwidth` here and
   `footer-layout-boxed` on the other 39 —

     $ grep -ho 'footer-layout-[a-z]*' reference/rendered/*.html | sort | uniq -c
          39 footer-layout-boxed
           1 footer-layout-fullwidth

   — and the rendered markup follows it: `footer-area-container invert` and
   `site-info` here, against `… container` on every other page.

   These two modifiers exist rather than a bare `.footer-area-container` rule
   because the padding has to survive REMOVING `.container`, and only this page
   removes it. The 15px is production's own: measured on live production at
   980, `/gallery/`'s `.footer-area-container` computes `max-width: none;
   margin: 0; padding: 0 15px; width: 980px` while `/pub/`'s computes
   `max-width: 720px; margin: 0 130px; padding: 0 15px; width: 720px`. The
   padding is identical on both — it is the cap and the auto margins that go.

   This was not a cosmetic difference. It is worth 99.81px of document height
   at 980px: the three widget columns are 326.66px wide here against /pub/'s
   239.98px, so the contact text wraps onto fewer lines. The gate caught it as
   `prod 980x2379 local 980x2478` before this was written.

   Only /gallery/ uses these two modifiers: it is the single unboxed footer in
   production's forty, per the count above, and it survives in the rebuild — so
   one page-scoped copy is the whole requirement, and nothing else uses them.

   If a SECOND page ever needs the same unboxing, promote both rules to the
   footer section above the divider rather than declaring a second copy under
   another prefix. A second consumer is the trigger; there is no other. */
.footer-area-container--fullwidth,
.site-info--fullwidth {
    padding-left: var(--bcp-gutter);
    padding-right: var(--bcp-gutter);
}