/* ==========================================================================
   Very Memorable, Inc. — static rebuild
   Typography and breakpoints copied directly from the original Koncept
   theme's style.css (2014-era theme, single incremental breakpoint cascade,
   no modern mobile-first redesign).

   Layout corrections per Michael's review of the first build:
   - Fixed-width (1296px) centered wrapper — dead space left/right on wide
     viewports, confirmed from the theme's own `.wrapper{width:1296px}` rule.
   - 3-column grid (not 4), true zero-gap Pinterest masonry: tiles kiss on
     every side, natural varying heights, packed with Isotope (js/main.js).
   - Thumbnails shrink in place as the window narrows; only drop from
     3 -> 2 -> 1 columns at specific breakpoints, not continuously.
   ========================================================================== */

* { box-sizing: border-box; }

/* html's own background paints the whole canvas, even past the page's
   actual content height — body's sits only behind body's own (shorter)
   box. On a mobile viewport taller than the page (short pages, no scroll),
   that gap below the footer used to show through as white; matching it to
   the footer's gray here fixes it without touching anything above the
   footer, which stays on body's own #FBFBFB. Per Michael, the original
   theme has this same gap (as white) — this is an explicit fix, not
   something carried over from source. */
html {
    background: #EDEDED;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
}
body {
    background: #FBFBFB;
}

/* #header is fixed/pinned (confirmed from the real theme's `.sticky #header`
   rule), so the page needs this padding-top to keep content from starting
   underneath it. Kept in sync with #header's own height at every breakpoint
   below. */
body { padding-top: 155px; }

a { text-decoration: none; color: inherit; }

/* ---------- Fixed-width centered container ----------
   Matches the original theme's default `.wrapper { width: 1296px; margin: auto; }`.
   On viewports wider than 1296px this leaves visible dead space left/right.
   Header, grid and footer all sit inside it. */

.wrapper {
    width: 1296px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

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

/* Pinned to the top at all times, and shrinks past 100px of scroll —
   copied directly from the real theme: `.sticky #header { position:fixed }`
   plus the `.smaller` class its scroll handler toggles at a 100px scrollTop
   threshold (initStickyHeader in main.js). Solid background since content
   scrolls underneath it once pinned. */
#header {
    height: 155px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: #FBFBFB;
    transition: height 250ms cubic-bezier(0.42, 0, 1, 1);
}
#header.smaller {
    height: 84px;
}

#logo {
    transform-origin: left center;
    transition: transform 250ms cubic-bezier(0.42, 0, 1, 1);
}
#header.smaller #logo {
    transform: scale(0.8);
}

#logo img {
    display: block;
    height: 29px;
    width: auto;
}

#main-menu .top-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 50px;
    white-space: nowrap;
}

#main-menu .top-menu > li > a {
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #7F7F7F;
}

#main-menu .top-menu > li > a:hover { color: #FF9000; }

/* Mobile nav — the original theme has no hamburger: below the breakpoint
   the whole top-menu is replaced by a native <select> listing each page
   (first option "menu", disabled-looking placeholder), confirmed from the
   live site. Desktop keeps the plain text links; only one of the two is
   ever visible at a time. Which one shows is decided live in JS
   (initResponsiveNav in main.js) by measuring the actual gap between the
   logo and the nav links — not a fixed viewport-width breakpoint — so it
   stays correct as link font-size/spacing change. #header.nav-collapsed
   is the class JS toggles. */
#header.nav-collapsed #main-menu .top-menu { display: none; }
#header.nav-collapsed #nav-select { display: inline-block; }

/* appearance:none (not "auto"/"menulist") on purpose: a native-chrome
   <select> on iOS Safari carries its own intrinsic minimum content width
   from the OS's menulist rendering, which a flex item can't shrink below
   no matter what min-width/flex-basis says — that's what was still pushing
   this past the screen edge on a real phone even after min-width:0 and
   flex-basis:0 (confirmed clean in a Chromium check both times, which
   doesn't have this quirk, so it never reproduced there). Turning the
   native chrome off hands sizing entirely to our own CSS box model, so it
   actually obeys min-width/flex-shrink like a normal element. Tapping it
   still pops the OS's native option list either way — appearance only
   changes the closed control's own look, not that interaction. Arrow is
   now hand-drawn (inline SVG) since the native one goes away with it. */
#nav-select {
    display: none;
    font-size: 13px;
    font-weight: 300;
    color: #333;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpolyline points='1,1 5,5 9,1' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 10px 6px;
    border: 1px solid #ccc;
    padding: 8px 28px 8px 10px;
    min-width: 0;
    max-width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* ---------- Portfolio grid — true masonry (Isotope) ---------- */

#portfolio-wrap {
    width: 100%;
    padding: 0 0 60px;
}

/* Product-design nav page: hero slideshow kisses the nav bar (no top
   padding on #hero-wrap itself — see single-portfolio pages), then a
   small gap before the grid starts. The grid itself is explicit flex
   rows, not Isotope masonry — see build_product_design_page.py for why
   (a couple of rows need an exact tall-item-against-two-stacked-items
   placement that free-flowing masonry can't guarantee). Same item/caption
   hover visuals as the homepage grid above, just with position:relative
   flex cells instead of Isotope's JS-positioned absolute ones. */
#product-grid-wrap {
    width: 100%;
    padding: 40px 0 60px;
}

.pd-grid {
    display: flex;
    flex-direction: column;
}

.pd-row {
    display: flex;
    align-items: flex-start;
}

.pd-row > .item {
    width: 50%;
}

.pd-stack {
    display: flex;
    flex-direction: column;
    width: 50%;
}
.pd-stack > .item {
    width: 100%;
}

.pd-grid .item {
    position: relative;
    display: block;
    overflow: hidden;
    background: #f4f4f4;
}
.pd-grid .item img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    transition: transform 200ms cubic-bezier(0.42, 0, 1, 1);
}
.pd-grid .item:hover img {
    transform: translate3d(0, 100%, 0);
}
.pd-grid .item .caption {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    background: #fff;
    transform: translate3d(0, -100%, 0);
    transition: transform 200ms cubic-bezier(0.42, 0, 1, 1);
}
.pd-grid .item:hover .caption {
    transform: translate3d(0, 0, 0);
}
.pd-grid .item .caption > div {
    display: table;
    width: 100%;
    height: 100%;
}
.pd-grid .item .caption > div > div {
    display: table-cell;
    vertical-align: middle;
}
.pd-grid .item .caption h3 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 300;
    color: #8C8C8C;
    margin: 0;
    padding: 0 20px;
}
.pd-grid .item .caption span {
    display: inline-block;
}
.pd-grid .item .caption span::after {
    content: "";
    display: block;
    height: 1px;
    width: 27px;
    background: #d4d4d4;
    margin: 25px auto 0;
}

/* Drops to one column well above the homepage grid's own 432px
   single-column point — these thumbnails are dense screenshots (website
   captures, dashboards), and at two-per-row on a phone (or a narrowed
   desktop window) there's not enough width left to read them. 760px
   matches the existing header/wrapper breakpoint already used elsewhere
   in this stylesheet, so it kicks in at the point things generally start
   reading as "mobile" rather than waiting for the narrowest phones. */
@media all and (max-width: 760px) {
    .pd-row {
        flex-direction: column;
    }
    .pd-row > .item,
    .pd-stack {
        width: 100%;
    }
}

.folio-grid {
    position: relative;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* .grid-sizer is an invisible, zero-height element Isotope reads for
   column width — it must always match .item's width exactly, including
   at every breakpoint below. Zero gutter: items kiss on every side. */
.grid-sizer {
    height: 0;
    margin: 0;
    padding: 0;
    float: none;
}
.grid-sizer,
.folio-grid .item {
    width: calc(100% / 3);
}

.folio-grid .item {
    position: absolute;
    overflow: hidden;
    background: #f4f4f4;
}

.folio-grid .item a { display: block; }
.folio-grid .item img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    transition: transform 200ms cubic-bezier(0.42, 0, 1, 1);
}
.folio-grid .item:hover img {
    transform: translate3d(0, 100%, 0);
}

/* Hover caption — copied directly from the original theme's
   #portfolio.style-one rules: a push/reveal, not a fade. The caption
   sits fully above the tile (translateY -100%) until hover, at which
   point it slides down into place while the image slides the same
   distance downward and out — both on the same 200ms transition, so
   they cross in the middle rather than one waiting on the other.
   White background so the swap reads as clean, not transparent. */
.folio-grid .item .caption {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    background: #fff;
    transform: translate3d(0, -100%, 0);
    transition: transform 200ms cubic-bezier(0.42, 0, 1, 1);
}
.folio-grid .item:hover .caption {
    transform: translate3d(0, 0, 0);
}

.folio-grid .item .caption > div {
    display: table;
    width: 100%;
    height: 100%;
}
.folio-grid .item .caption > div > div {
    display: table-cell;
    vertical-align: middle;
}

.folio-grid .item .caption h3 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 300;
    color: #8C8C8C;
    margin: 0;
    padding: 0 20px;
}
.folio-grid .item .caption span {
    display: inline-block;
}
.folio-grid .item .caption span::after {
    content: "";
    display: block;
    height: 1px;
    width: 27px;
    background: #d4d4d4;
    margin: 25px auto 0;
}

/* ---------- Single-portfolio page (hero image + caption) ----------
   First-pass template: nav (shared #header) -> full-width hero image ->
   caption text block -> shared #footer. Per Michael, no prev/next project
   nav for this first pass. The real per-project text block is a WPBakery
   vc_text_separator shortcode living INSIDE the post's own content (not
   anything the theme's PHP templates render directly) — confirmed straight
   from the SQL export's raw post_content for this exact page:
     [vc_text_separator title="Symposium Poster"
       subtitle="Print Design | Client: The East–West Center"
       style="small" align="center"]
   `style="small"` is the style used on effectively every real project page
   (the handful of `style="large"` hits in the export are the theme's own
   demo content, not Michael's). WPBakery's own plugin CSS (js_composer.css)
   is what actually sizes `.wpb_text_separator` — it isn't among the theme
   files we have, so the exact px value can't be pulled from source; 20px
   below is a judgment call pending Michael's review, not a confirmed
   number. Per Michael, no divider line between title and subtitle, and the
   title matches the subtitle's size (both 16px). */

#hero-wrap {
    width: 100%;
}
#hero-wrap img.hero-image {
    display: block;
    width: 100%;
    height: auto;
}

.hero-caption {
    padding: 50px 27% 170px;
    text-align: center;
}
.hero-caption h1 {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 400;
    color: #A5A5A5;
    margin: 0 0 8px;
}
.hero-caption .subtitle {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #A5A5A5;
}
.hero-caption .subtitle .sep {
    color: #cccccc;
}

/* The 27% side padding reads fine on a wide desktop column but gets
   cramped fast as the wrapper narrows, so it eases off at the same
   breakpoints as everything else rather than staying fixed. */
@media all and (max-width: 1120px) {
    .hero-caption { padding-left: 15%; padding-right: 15%; }
}
@media all and (max-width: 760px) {
    .hero-caption { padding-left: 30px; padding-right: 30px; }
}
@media all and (max-width: 432px) {
    .hero-caption { padding-left: 20px; padding-right: 20px; }
}

/* ---------- Kids page (scrolling stack of 11 projects) ----------
   Not a grid: each project is a full-bleed-of-the-wrapper section —
   hero image, then caption — stacked one after another down the page.
   Confirmed against the live verymemorable.com/kids/ page: unlike the
   single-project hero pages above, each image here keeps its own native
   size (centered, capped at the wrapper's width) rather than being
   stretched to fill it — most of these assets happen to already be
   exactly 1296px wide so they fill it anyway, but the Pinky Dinky Doo
   gif (1034px) stays visibly narrower, matching the live page. The
   first image sits a 50px gap below the nav bar (rather than kissing
   it, like #hero-wrap does). That gap is an explicit white strip (via
   ::before), not #kids-wrap's own background — per Michael, the gap read
   as the same gray as the nav bar (#header is #FBFBFB, same as body) and
   needed to be white instead, like the contact page's white card. Scoped
   to the 1296px column's own width (matching .wrapper exactly, margin:
   0 auto) rather than the full viewport — a first attempt at full-width
   white got corrected by Michael, since the page's actual gray margins
   (outside that 1296px column) need to stay gray, same as everywhere
   else on this page (confirmed from the live page, see .kids-entry
   .wrapper below). Each caption's top/bottom padding (25px/90px, vs.
   the single-project page's 50px/170px) is just the gap to the
   slideshow above and the next project below, not a lead-in to the
   footer. */
#kids-wrap {
    width: 100%;
}
#kids-wrap::before {
    content: "";
    display: block;
    width: 1296px;
    max-width: 100%;
    margin: 0 auto;
    height: 50px;
    background: #fff;
}
/* Confirmed from the live page: each section's 1296px column (image +
   caption) sits on a solid white background, distinct from the page's
   off-white/gray margins outside it — not the page body's own #FBFBFB. */
.kids-entry .wrapper {
    background: #fff;
}
.kids-entry img.hero-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
.kids-entry .hero-caption {
    padding-top: 25px;
    padding-bottom: 65px;
}

/* ---------- Single-portfolio page — slideshow variant ----------
   Replaces the single hero image for projects whose real WordPress page
   used Revolution Slider (confirmed from the SQL export — see
   build_portfolio_page.py's render_slideshow_hero for the citation).
   Manual-only horizontal-push carousel: no autoplay, no dot indicators,
   per Michael. Track is a flex row of full-width slides, flex-shrink:0 so
   it overflows its own box on purpose; #hero-slideshow clips that
   overflow and JS translates the track by whole slide-widths in px
   (computed from the container's own width, not a % of the track, since
   the track's rendered width is slideCount× the container's). */

.hero-slideshow {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.slideshow-track {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 500ms cubic-bezier(0.42, 0, 0.2, 1);
}
.slideshow-track .slide {
    flex: 1 0 100%;
    width: 100%;
}
.slideshow-track .slide img {
    display: block;
    width: 100%;
    height: auto;
}

/* Arrow styling pulled from the one real slider (IPX Login) whose nav
   settings weren't left at Revolution Slider's own defaults: a 40px
   circle, tan background lightening on hover, white 20px chevron. The
   other 3 real sliders in the export show inconsistent/default arrow
   colors that don't look like a deliberate choice, so this one treatment
   is used across the board rather than matching each inconsistently. */
.slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #b9b6ae;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 200ms ease;
    z-index: 10;
}
.slide-arrow:hover {
    background: #d5d2cb;
}
.slide-arrow.prev { left: 20px; }
.slide-arrow.next { right: 20px; }
.slide-arrow svg {
    width: 20px;
    height: 20px;
}
.slide-arrow svg polyline {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* One-time entrance for the slideshow variant only: blank, then the
   first slide rolls in from the right, matching the real product-design
   and kids pages. Built in JS as a throwaway overlay (see js/slideshow.js)
   so the cycling logic never has to account for it. */
.entrance-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 4;
    background: #FBFBFB;
    transform: translateX(100%);
    transition: transform 700ms cubic-bezier(0.42, 0, 0.2, 1);
}
.entrance-overlay.is-in {
    transform: translateX(0);
}
.entrance-overlay img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- Plain content pages (contact, about, awards, etc.) ----------
   Confirmed from the real SQL export's `contact` page: a left-aligned
   address block (bold company name only, per the source's single <strong>
   tag) followed by the embedded Google Map. Per Michael's review of the
   first build: a white content card (.page-card) inset inside the page's
   own gray background, rather than text sitting directly on the body's
   near-white default — card edges match the header/footer's 1296px
   wrapper exactly, with the card's own internal padding (not the
   wrapper's) placing the text/map. "Very Memorable, Inc." at 500 weight
   (not a bold 700) and a lighter gray body color, both per Michael. */

body.contact-page,
body.about-page {
    background: #FBFBFB;
}

#page-wrap {
    width: 100%;
    padding: 0 0 100px;
}

/* The card fills the wrapper's full width/position, so its edges line up
   with the header logo and footer text above/below — the generic
   .wrapper's own responsive side-padding is cancelled here since the card
   supplies its own (responsive) internal padding instead. */
#page-wrap .wrapper {
    padding-left: 0;
    padding-right: 0;
}

.page-card {
    background: #FFFFFF;
    padding: 80px 100px 100px;
}

.contact-info {
    font-size: 16px;
    line-height: 1.7;
    color: #555555;
}
.contact-info p {
    margin: 0 0 24px;
}
.contact-info strong {
    font-weight: 500;
}

.btn-linkedin {
    display: inline-block;
    margin-top: 8px;
    padding: 10px 22px;
    background: #EDEDED;
    color: #555555;
    font-size: 14px;
    font-weight: 400;
    border-radius: 20px;
    transition: background 150ms ease, color 150ms ease;
}
.btn-linkedin:hover {
    background: #FF9000;
    color: #FFFFFF;
}

.contact-map {
    margin-top: 40px;
}
.contact-map iframe {
    display: block;
    width: 100%;
    height: 450px;
    max-width: 100%;
}

@media all and (max-width: 1120px) {
    .page-card { padding: 60px 60px 80px; }
}

@media all and (max-width: 760px) {
    #page-wrap { padding: 0 0 60px; }
    .page-card { padding: 50px 40px 60px; }
    .contact-map iframe { height: 350px; }
}

@media all and (max-width: 432px) {
    .page-card { padding: 40px 20px 50px; }
}

/* ---------- About page — title + stat cards ----------
   The 8 stat cards used to be Photoshop graphics (2022, now too low-res to
   reuse). Two earlier passes rebuilt them as live HTML/CSS text instead
   (first eyeballed from a screenshot, then read exactly out of Michael's
   about_touts_copy_3.psd via psd-tools) — accurate, but slow to keep tuning
   by hand. Michael's own fix: he exported each card's typography treatment
   as its own SVG (images/about/tout-1.svg .. tout-8.svg, text converted to
   outlines — exact kerning/sizing, no font dependency), all sharing the
   same 270x211 viewBox. So the per-card number-size variation and the
   "content flush to the top, negative space below" look (see Michael's
   first-pass feedback) are both baked into the SVGs themselves — a card
   with no eyebrow line just has blank space at the bottom of its viewBox —
   and reproduce automatically as long as every card's image renders at the
   same width/aspect-ratio. CSS here only needs to build the card shell
   (border + accent bar) and place the image; no more per-card classes.

   Page shell: this page's title + stat grid sit inside the same white
   .page-card (on the page's gray background) as contact.html — per
   Michael's annotated screenshot of the contact page, used as the guide —
   rather than this page's own bespoke #about-wrap/padding. #page-wrap and
   .page-card are the shared rules (above, in the contact-page section). */

.about-title {
    text-align: left;
    padding-bottom: 35px; /* per Michael, tighter gap to the stat-card row */
}
.about-title h1 {
    font-size: 25px;
    font-weight: 300;
    color: #8C8C8C;
    margin: 0 0 8px;
}
.about-title .subtitle {
    display: block;
    font-size: 15px;
    color: #A5A5A5;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

/* Card shell: per Michael, once the mobile-only tight-crop treatment below
   landed well, he asked for the wider (tablet/desktop) breakpoints to match
   it — so the same small padding + scale-and-clip approach is now the base
   rule, applying at every card width instead of just <=432px. (Scaling the
   image past 100% is safe at any card width: the tightest card's own ink
   reaches ~85% of its unscaled box, so a 1.18x scale with this much padding
   leaves the same margin before the trailing "+" would clip regardless of
   how wide the card itself is — verified across the full 320px-1400px
   range.) overflow:hidden on the card itself is what does the clipping. */
.stat-card {
    border: 1px solid #E3E3E3;
    background: #fff;
    min-width: 0;
    overflow: hidden;
}
.stat-card .bar {
    height: 8px;
    margin-left: 11px; /* kept aligned with .content's left padding below */
    background: #DAD4DB;
}
.stat-card .content {
    /* left padding +5px per Michael, to widen the left margin inside the
       tout box; bar's margin-left above matches so the two stay aligned */
    padding: 6px 6px 8px 11px;
}
.stat-tout {
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1.003); /* 1.18 * 0.85 — per Michael, 85% of the prior size */
    transform-origin: top left;
}

@media all and (max-width: 1120px) {
    .stats-grid { gap: 24px; }
}

@media all and (max-width: 960px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* No side-padding override needed at this breakpoint (unlike the old
   #about-wrap) — .page-card already supplies its own responsive padding,
   same as contact.html. */
@media all and (max-width: 760px) {
    .stats-grid { gap: 20px; }
}

/* ---------- About page — "High-Profile Client Experience" ----------
   First pass, per Michael: swipe the two logo-grid images straight off the
   live site (wp-content/uploads/2022/02/client-experience-left-v2.png and
   .../2022/01/client-experience-right.png, both 648x450, no higher-res
   version on disk) rather than rebuilding them, and see if that holds up
   before digging up the original source logotypes. .section-title started
   out reusing .about-title h1's exact size/weight/color (same <h2> vs <h1>
   reasoning — a page should only have one <h1>), then Michael had it sized
   down to 20px on its own. */
.section-title {
    text-align: left;
    margin: 40px 0 25px; /* per Michael, further -10px off the top gutter */
}
.section-title h2 {
    font-size: 20px;
    font-weight: 300;
    color: #8C8C8C;
    margin: 0;
}

.client-logos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}
.client-logos img {
    display: block;
    width: 100%;
    height: auto;
}

@media all and (max-width: 760px) {
    .client-logos {
        grid-template-columns: 1fr;
        gap: 0; /* per Michael, close the vertical gap when stacked */
    }
}

/* ---------- About page — "Awards & Recognitions" ----------
   3rd section, built from Michael's own hand-sorted spreadsheet (he
   reconciled verymemorable.com's award badges against michaelpinto.design's
   table). Laid out similar to that reference page's own awards table —
   thin light-gray rule under each row, muted-gray header labels, gray body
   text, left-aligned, no vertical dividers — just not its dark theme.

   Markup is a CSS grid rather than a real <table>, matching the rest of
   this site: each .awards-row is `display:contents` so its 4 .awards-cell
   children drop straight into the shared 4-column grid as if the whole
   table were one flat list of cells, and every cell's own border-bottom
   is what forms each row's line.

   Client cells link to the matching portfolio/ page when Michael's sheet
   listed one; per his instruction, that link is orange (the same #FF9000
   used for the nav's own hover state) rather than a generic link blue. */
.awards-table {
    display: grid;
    grid-template-columns: 1.6fr 0.6fr 1fr 1.4fr;
    column-gap: 24px;
}
.awards-row {
    display: contents;
}
.awards-cell {
    padding: 16px 0;
    border-bottom: 1px solid #EDEDED;
    font-size: 15px;
    color: #555555;
}
.awards-header .awards-cell {
    padding: 0 0 10px;
    font-size: 13px;
    color: #A5A5A5;
}
.awards-cell a {
    color: inherit;
    text-decoration: none;
}
.awards-cell a:hover {
    color: #FF9000;
}
.awards-row:not(.awards-header) .awards-cell[data-label="Year"] {
    color: #8C8C8C; /* per Michael, a touch lighter than the other data cells' #555 */
}

/* Per Michael: once the row's too tight for all 4 columns, drop to just
   Award + Category — Year and Client aren't shown at this width (not
   folded into the remaining two cells). */
@media all and (max-width: 760px) {
    .awards-table {
        grid-template-columns: 1fr 1fr;
    }
    .awards-cell[data-label="Year"],
    .awards-cell[data-label="Client"] {
        display: none;
    }
}

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

#footer {
    padding: 50px 0 125px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    color: #7D7D7D;
    text-align: center;
    text-transform: lowercase;
    background-color: #EDEDED;
}

/* ==========================================================================
   Breakpoint cascade — these exact pixel values (1120 / 960 / 432) are
   copied directly from the original theme's own style.css, not guessed:
     .wrapper (default)              width: 1296px
     .wrapper @ max-width:1120px     width: 100%; padding: 0 40px
     .folio-grid.cols-three .item @ max-width:960px   width: calc(91%/2)
     .folio-grid.cols-three .item @ max-width:432px   width: 91%
   Above 1296px: fixed wrapper, dead space outside it (shrinking does
   nothing there — the grid is already at full size).
   960px: drop 3 -> 2 columns.
   432px: drop 2 -> 1 column.

   The side-padding media query below is widened from the original
   theme's literal max-width:1120px to max-width:1296px — the original
   value left a dead zone (Michael caught this live, on both Safari and
   Chrome): .wrapper's own width:1296px + max-width:100% already makes it
   start shrinking to fill the viewport as soon as the window drops below
   1296px, edge to edge with no padding yet, since the padding rule didn't
   apply until 1120px. So anywhere from 1121-1295px wide, the header's
   logo and nav (and the grid) sat flush against the screen edges. Padding
   now kicks in at exactly the width where the wrapper itself first stops
   being full-size (1296px), closing that gap. 960px/432px below are
   unaffected — those are the separate grid-column-count breakpoints. */

@media all and (max-width: 1296px) {
    .wrapper {
        width: 100%;
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media all and (max-width: 960px) {
    #header { height: 124px; }
    body { padding-top: 124px; }

    /* Confirmed in the real theme: logo scales down at this breakpoint
       unconditionally, independent of the scroll-triggered .smaller shrink
       (#header #logo { transform: scale(.8); }, no .sticky/.smaller gate). */
    #logo { transform: scale(0.8); }

    .grid-sizer,
    .folio-grid .item { width: calc(100% / 2); }
}

@media all and (max-width: 760px) {
    #header { height: 104px; }
    body { padding-top: 104px; }

    /* Matches the real theme's own `.wrapper { padding-left:0; padding-right:0; }`
       rule at this exact breakpoint — side margins go to zero on mobile for
       content (the grid bleeds edge-to-edge). The header keeps its own
       40px gutter on each side instead (checked against the live theme's
       `#menu-class { padding-left:40px; padding-right:40px; }` at this same
       760px breakpoint), so the logo and the nav pulldown don't sit flush
       against the screen edge. */
    .wrapper { padding-left: 0; padding-right: 0; }
    #header .wrapper { padding-left: 40px; padding-right: 40px; }
}

/* Matches the live theme's own `#menu-class` padding dropping from 40px to
   30px at this exact 520px breakpoint. */
@media all and (max-width: 520px) {
    #header .wrapper { padding-left: 30px; padding-right: 30px; }
}

@media all and (max-width: 432px) {
    #nav-group { gap: 14px; }
    /* Confirmed against real Safari (responsive mode, iPhone SE/320px): the
       "menu" label text still forces the control wider than this row has
       room for, past every width/flex-shrink override tried above — min-
       width:0 and flex-basis:0 check out clean in Chromium but don't hold
       on real WebKit. The live theme hits this same wall and has its own
       fix for it: below its matching ~420px breakpoint it text-indents the
       dropdown's own label off-screen and shrinks it to an icon-sized box
       (`.responsive-menu .regular-select-inner { text-indent: -9999px; }`,
       `.responsive-menu { width: 28px; }`) — no label text left to size
       against, so the overflow problem no longer has anything to act on.
       Same move here: fixed small width, label pushed out of view, arrow
       centered since it's the only thing left to show. */
    #nav-select {
        width: 40px;
        min-width: 0;
        flex: 0 0 40px;
        padding: 8px 0;
        text-indent: -9999px;
        background-position: center;
    }
    /* No further logo shrink here — checked against the live theme's CSS:
       it never reduces the logo past the single `transform: scale(.8)` set
       at 960px (`#header #logo img { height:100%; width:auto; }`, i.e. the
       logo's own 29px box just rides that one scale down). A prior
       `#logo img { height: 22px; }` override here was shrinking it a
       second time, past what the original ever did — removed. */

    .grid-sizer,
    .folio-grid .item { width: 100%; }
}