/* G&C HOMEPAGE — editorial redesign, September 2026 */
:root {
    --home-ink: #11100f;
    --home-charcoal: #181614;
    --home-cream: #f3e3ca;
    --home-paper: #ead7b8;
    --home-rust: #bd5428;
    --home-rust-dark: #8f3418;
    --home-line: rgba(189, 84, 40, .7);
}

.home-hero {
    min-height: 650px;
}

.home-hero .hero-overlay {
    min-height: 650px;
    align-items: stretch;
    padding: 0 clamp(24px, 5.5vw, 88px) clamp(52px, 7vw, 90px);
}

.home-hero-shell {
    width: min(1420px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}


.home-hero .hero-content {
    width: 100%;
    margin: auto 0;
    grid-template-columns: minmax(260px, 420px) minmax(380px, 590px);
}

.home-eyebrow,
.home-story-meta,
.home-status,
.home-image-tag {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    letter-spacing: 2px;
}

.home-eyebrow {
    display: block;
    margin-bottom: 18px;
    color: var(--home-rust);
    font-size: 12px;
}

.home-hero .hero-title-art { margin-bottom: 24px; }


#main-content { position: relative; background: var(--home-ink); overflow: hidden; }


.home-intro { text-align: center; }
.home-intro > h2 { max-width: 1120px; margin: 0 auto; }
.home-intro > p { max-width: 1050px; margin: 38px auto 64px; color: rgba(246,230,207,.8); font-size: 19px; line-height: 1.75; text-align: left; }
.home-pathways { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.home-pathway { min-height: 380px; padding: 42px 24px 62px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; color: var(--home-cream); background: url("../images/logos/gc-badge-flat.webp") center/100% 100% no-repeat; text-decoration: none; transition: transform .2s ease,filter .2s ease; }
.home-pathway:hover { transform: translateY(-4px); filter: brightness(1.08); }
.home-pathway img:first-child { width: 145px; margin: 0 auto 22px; }
.home-pathway img:nth-child(2) { width: auto; max-width: 78%; height: 58px; object-fit: contain; margin: 0 auto 30px; }
.home-pathway span { max-width: 210px; margin: auto auto 0; font-family: Arial,Helvetica,sans-serif; font-size: 12px; font-weight: 800; line-height: 1.55; letter-spacing: 1px; }

.home-section {
    position: relative;
    z-index: 2;
    width: min(1420px, calc(100% - 48px));
    margin: 0 auto;
    padding: clamp(76px, 9vw, 132px) 0;
}

.home-section + .home-section { border-top: 1px solid rgba(246, 230, 207, .16); }

.home-section-head {
    display: grid;
    grid-template-columns: 64px minmax(280px, 1fr) minmax(220px, 460px);
    gap: 24px;
    align-items: end;
    margin-bottom: 48px;
}


.home-section-head .home-eyebrow { margin-bottom: 9px; }

.home-section h2 {
    margin: 0;
    color: var(--home-cream);
    font-family: "Wausau", Georgia, serif;
    font-size: clamp(48px, 6.2vw, 92px);
    font-weight: normal;
    line-height: .9;
}

.home-section-head > p,
.home-section-link {
    justify-self: end;
    max-width: 420px;
    color: rgba(246, 230, 207, .72);
    font-size: 18px;
    line-height: 1.5;
}

.home-section-link {
    color: var(--home-cream);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-decoration-color: var(--home-rust);
    text-underline-offset: 6px;
}


.home-build-image,
.home-story-image { position: relative; overflow: hidden; }

.home-build-image img,
.home-story-image img,
.home-note img,
.home-behind-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}


.home-build-feature:hover .home-build-image img,
.home-story:hover .home-story-image img,
.home-note:hover img { transform: scale(1.018); }


.home-text-link {
    color: var(--home-rust);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.home-kitchen { background: var(--home-ink); }





.home-story-image img { object-position: center; }
.home-story:nth-child(3) .home-story-image img { object-position: center 62%; }

.home-status {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 8px 11px;
    color: #fff;
    background: var(--home-rust-dark);
    border: 1px solid rgba(255,255,255,.28);
    font-size: 10px;
    transform: rotate(2deg);
}










.home-notebook .home-section-head { max-width: 1420px; margin-left: auto; margin-right: auto; }


.home-note {
    position: relative;
    min-height: 0;
    overflow: hidden;
    color: inherit;
    background: #0f0e0d;
    text-decoration: none;
}

.home-note-lead { grid-row: 1 / 3; }
.home-note:nth-child(2) { grid-column: 2; grid-row: 1; }
.home-note:nth-child(3) { grid-column: 3; grid-row: 1; }
.home-note:nth-child(4) { grid-column: 2 / 4; grid-row: 2; }
.home-note img { position: absolute; inset: 0; }

.home-note::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(10, 9, 8, .92) 100%);
}

.home-note-overlay,
.home-note-copy {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px;
}

.home-note h3 {
    margin: 10px 0 12px;
    color: #fff6e7;
    font-family: "Wausau", Georgia, serif;
    font-size: clamp(27px, 3vw, 46px);
    font-weight: normal;
    line-height: .98;
}

.home-note:not(.home-note-lead) h3 { font-size: clamp(22px, 2vw, 30px); }
.home-note p { margin: 0 0 18px; color: rgba(255,246,231,.78); font-size: 16px; line-height: 1.5; }


.home-roadmap { text-align: left; }


.roadmap-shared .done b { background:var(--home-rust-dark); }
.roadmap-shared .current b { box-shadow:0 0 0 7px rgba(189,84,40,.18); }


.home-roadmap > .home-section-link { display:table; margin:0 auto; }
.zip-row { margin-top:18px; }
.zip-row label { display:block; margin-bottom:8px; color:var(--home-cream); font:700 12px Arial,sans-serif; letter-spacing:1px; text-transform:uppercase; }
.zip-row input { width:100%; padding:17px 18px; border:1px solid rgba(246,230,207,.45); background:transparent; color:var(--home-cream); font:13px Arial,sans-serif; letter-spacing:1px; }
.zip-row p { margin-top:8px; color:rgba(246,230,207,.58); font-size:12px; font-style:italic; }

.visit-soon { border-top: 1px solid rgba(246,230,207,.16); }

@media (max-width: 980px) {
    
    .home-hero .hero-content { grid-template-columns: minmax(220px, 330px) 1fr; }
    .home-section-head { grid-template-columns: 48px 1fr; }
    .home-section-head > p, .home-section-link { grid-column: 2; justify-self: start; }
    
    
    
    .home-story-lead { grid-column: 1 / 3; display: grid; grid-template-columns: 1.3fr 1fr; }
    .home-story-lead .home-story-image { aspect-ratio: auto; min-height: 360px; }
    
    .home-note-lead { grid-column: 1 / 3; grid-row: 1; }
    .home-note:nth-child(2) { grid-column: 1; grid-row: 2; }
    .home-note:nth-child(3) { grid-column: 2; grid-row: 2; }
    .home-note:nth-child(4) { grid-column: 1 / 3; grid-row: 3; }
    
    .home-pathways { grid-template-columns:1fr 1fr; }
}

@media (max-width: 680px) {
    .home-hero { min-height: 760px; background-position: 62% center; }
    .home-hero .hero-overlay { min-height: 760px; padding: 0 22px 46px; background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.92)); }
    
    
    .home-hero .hero-content { grid-template-columns: 1fr; gap: 24px; text-align: center; }
    .home-hero .hero-brand { justify-content: center; }
    .home-hero .hero-logo { width: min(240px, 62vw); }
    .home-hero .hero-title-art { width: min(390px, 90vw); margin-left: auto; margin-right: auto; }
    .home-hero .tagline { font-size: 17px; }
    
    .home-section { width: min(100% - 32px, 1420px); padding: 70px 0; }
    
    .home-section-head { grid-template-columns: 34px 1fr; gap: 10px; margin-bottom: 30px; }
    .home-section h2 { font-size: clamp(45px, 15vw, 68px); }
    
    
    
    .home-story-lead { grid-column: auto; display: flex; }
    .home-story-lead .home-story-image { min-height: 0; aspect-ratio: 4 / 3; }
    
    
    .home-note-lead, .home-note:nth-child(2), .home-note:nth-child(3), .home-note:nth-child(4) { grid-column: 1; grid-row: auto; }
    .home-note h3, .home-note:not(.home-note-lead) h3 { font-size: 30px; }
    
    
    
    
    .home-pathways { grid-template-columns:1fr; }
    .home-pathway { width:min(340px,100%); justify-self:center; }
    
    
    
    
    
    
    
    
}

/* SECOND-PASS REFINEMENTS */

.home-intro { border-left:0; text-align:center; }
.home-intro > .home-eyebrow { width:100%; margin:0 auto 22px; text-align:center; }
.home-intro > h2 { width:100%; max-width:1320px; margin:0 auto; text-align:center; font-size:clamp(48px,5.2vw,78px); line-height:.96; text-wrap:balance; }
.home-intro-copy { width:min(100%,1050px); margin:46px auto 68px; text-align:center; }
.home-intro-copy p { margin:0 auto 25px; color:rgba(246,230,207,.8); font-size:19px; line-height:1.72; text-align:center; }
.home-intro-copy p:last-child { margin-bottom:0; }
.home-intro > p { display:none; }
.home-pathways { gap:30px; padding:0; border:0; box-shadow:none; background:transparent; }
.home-pathway { position:relative; min-height:360px; padding:0; overflow:hidden; border:4px solid #873618; background:#171513; text-align:left; box-shadow:inset 0 0 0 5px #11100f,inset 0 0 0 6px rgba(246,230,207,.42),0 10px 28px rgba(0,0,0,.34); clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px); }
.home-pathway img,.home-pathway img:first-child,.home-pathway img:nth-child(2) { width:100%; max-width:none; height:100%; margin:0; object-fit:cover; }
.home-pathway:nth-child(1) img { object-position:center; }
.home-pathway:nth-child(2) img { object-position:center 42%; }
.home-pathway:nth-child(3) img { object-position:center; }
.home-pathway:nth-child(4) img { object-position:center 18%; }
.home-pathway::after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,rgba(8,7,6,.94)); }
.home-pathway span { position:absolute; z-index:2; left:0; right:0; bottom:0; max-width:none; margin:0; padding:28px 24px; }
.home-pathway small { display:block; margin-bottom:8px; color:#d56733; font:800 11px Arial,sans-serif; letter-spacing:2px; }
.home-pathway strong { display:block; color:#fff3df; font-family:"Wausau",Georgia,serif; font-size:30px; font-weight:400; line-height:1; }
.home-section-links { justify-self:end; display:flex; gap:24px; }
.home-story-head { grid-template-columns:minmax(0,1fr) auto; }
.home-roadmap-head { grid-template-columns:minmax(0,1fr) minmax(220px,460px); }


.home-status.pass { background:#2f6f4e; }
.home-status.fail { background:#b4232b; }
.home-status.testing { background:#b7791f; }

.roadmap-linear { position:relative; display:grid; grid-template-columns:repeat(8,minmax(135px,1fr)); gap:0; margin:58px 0 48px; padding:0; list-style:none; overflow-x:auto; scrollbar-color:#9d3d1d #211d19; }
.roadmap-linear::before { content:""; position:absolute; left:6.25%; right:6.25%; top:28px; height:3px; background:#9d3d1d; }
.roadmap-linear li { position:relative; z-index:1; min-width:135px; text-align:center; }
.roadmap-linear b { display:grid; place-items:center; width:56px; height:56px; margin:0 auto 18px; border:3px solid #9d3d1d; border-radius:50%; background:#11100f; color:#f3e3ca; font:800 12px Arial,sans-serif; }
.roadmap-linear .done b { background:#9d3d1d; }
.roadmap-linear .current b { box-shadow:0 0 0 7px rgba(189,84,40,.18); }
.roadmap-linear strong { display:block; padding:0 10px 18px; color:#f3e3ca; font:800 12px/1.4 Arial,sans-serif; letter-spacing:.8px; }

@media (max-width:980px) {
  .home-pathway { min-height:320px; }
  
  
  
  
}
@media (max-width:680px) {
  .home-story-head,.home-roadmap-head { grid-template-columns:1fr; gap:18px; }
  .home-story-head .home-section-links,.home-roadmap-head > p { grid-column:1; justify-self:start; }
  .home-intro-copy p { font-size:17px; line-height:1.65; }
  .home-pathway { width:100%; min-height:300px; }
  .home-section-links { grid-column:2; justify-self:start; flex-wrap:wrap; }
  
  
  
  
  .roadmap-linear { display:grid; grid-template-columns:1fr; gap:22px; overflow:visible; }
  .roadmap-linear::before { left:27px; right:auto; top:28px; bottom:28px; width:3px; height:auto; }
  .roadmap-linear li { display:grid; grid-template-columns:56px 1fr; align-items:center; gap:18px; text-align:left; }
  .roadmap-linear b { margin:0; }
  .roadmap-linear strong { padding:0; }
}

/* =========================================================
   HOMEPAGE — WHAT'S HAPPENING NOW MOSAIC
   Final production layout. Desktop, tablet and mobile.
   ========================================================= */

.home-mosaic{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-template-rows:repeat(10,110px) 82px;
    gap:14px;
    align-items:stretch;
}

.home-mosaic > a{
    position:relative;
    min-width:0;
    min-height:0;
    overflow:hidden;
    border:0;
    background:#171513;
    box-shadow:none;
    text-decoration:none;
}

/* ----- DESKTOP GRID ----- */

.home-mosaic > :nth-child(1){
    grid-column:1 / 7;
    grid-row:1 / 4;
}

.home-mosaic > :nth-child(2){
    grid-column:7 / 10;
    grid-row:1 / 4;
}

.home-mosaic > :nth-child(3){
    grid-column:10 / 13;
    grid-row:1 / 4;
}

.home-mosaic > :nth-child(4){
    grid-column:1 / 5;
    grid-row:4 / 12;
}

.home-mosaic > :nth-child(5){
    grid-column:5 / 9;
    grid-row:4 / 7;
}

.home-mosaic > :nth-child(7){
    grid-column:5 / 9;
    grid-row:7 / 10;
}

.home-mosaic > :nth-child(6){
    grid-column:9 / 13;
    grid-row:4 / 12;
}

.home-mosaic > :nth-child(8){
    grid-column:5 / 9;
    grid-row:10 / 12;
}


/* ----- SHARED IMAGE TREATMENT ----- */

.home-mosaic img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-width:100%;
    object-fit:cover;
}

.home-mosaic .home-story-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-width:100%;
    aspect-ratio:auto;
    overflow:hidden;
    background:#171513;
}

.home-mosaic .home-story-image img{
    width:100%;
    height:100%;
    max-width:100%;
    object-fit:cover;
}

.home-mosaic > :nth-child(1) img{ object-position:center 30%; }
.home-mosaic > :nth-child(2) img{ object-position:center 50%; }
.home-mosaic > :nth-child(3) img{ object-position:center 45%; }
.home-mosaic > :nth-child(4) img{ object-position:center 50%; }
.home-mosaic > :nth-child(5) img{ object-position:center; }
.home-mosaic > :nth-child(6) img{ object-position:center 58%; }
.home-mosaic > :nth-child(7) img{ object-position:center; }


/* ----- TEST KITCHEN CARDS ----- */

.home-mosaic .home-story{
    display:block;
    background:#171513;
    color:#F3E3CA;
}

.home-mosaic .home-story-copy{
    position:absolute;
    z-index:3;
    left:0;
    right:0;
    bottom:0;
    padding:58px 24px 24px;
    background:linear-gradient(transparent,rgba(10,9,8,.94));
}

/* Explicit production colors so these cannot inherit the light-card
   typography used elsewhere on the homepage. */
.home-mosaic .home-story h3{
    margin:13px 0 12px;
    color:#F3E3CA;
    font-family:"Wausau",Georgia,serif;
    font-size:clamp(25px,2.2vw,35px);
    font-weight:400;
    line-height:1;
}

.home-mosaic .home-story p{
    margin:0 0 22px;
    color:rgba(243,227,202,.82);
    font-family:Georgia,"Times New Roman",serif;
    font-size:16px;
    line-height:1.5;
}

.home-mosaic .home-story .home-text-link{
    color:#D56733;
}

.home-mosaic .home-story-meta{
    display:none;
}


/* ----- NOTEBOOK CARDS ----- */

.home-mosaic .home-note{
    position:relative;
    display:block;
    background:#171513;
}

.home-mosaic .home-note::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(transparent 38%,rgba(10,9,8,.94));
}

.home-mosaic .home-note-overlay,
.home-mosaic .home-note-copy{
    position:absolute;
    z-index:3;
    left:0;
    right:0;
    bottom:0;
    padding:28px;
}

.home-mosaic .home-note h3{
    color:#FFF6E7;
}

.home-mosaic .home-note .home-text-link{
    color:#D56733;
}

/* Food Cost + Silver Skin: quieter center-stack cards. */
.home-mosaic > :nth-child(5) .home-note-copy,
.home-mosaic > :nth-child(7) .home-note-copy{
    padding:48px 22px 22px;
    background:linear-gradient(transparent 18%,rgba(10,9,8,.94));
}

.home-mosaic > :nth-child(5) h3,
.home-mosaic > :nth-child(7) h3{
    font-size:clamp(22px,2vw,30px);
    line-height:1.02;
}


/* ----- THE FIRST CUT ----- */

.home-first-cut{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:9px;
    padding:18px 24px;
    background:#171513;
    color:#F3E3CA;
    text-decoration:none;
}

.home-first-cut h3{
    margin:0;
    color:#F3E3CA;
    font-family:"Wausau",Georgia,serif;
    font-size:clamp(21px,1.7vw,27px);
    font-weight:400;
    line-height:1;
    letter-spacing:.3px;
    text-decoration:none;
}

.home-first-cut p{
    margin:0;
    color:rgba(243,227,202,.76);
    font-family:Georgia,"Times New Roman",serif;
    font-size:14px;
    font-style:italic;
    line-height:1.35;
    text-decoration:none;
}

.home-first-cut-link{
    display:block;
    margin-top:3px;
    color:#D56733;
    font-family:Arial,Helvetica,sans-serif;
    font-size:9px;
    font-weight:800;
    line-height:1.2;
    letter-spacing:1.5px;
    text-decoration:none;
}

.home-first-cut:hover h3,
.home-first-cut:focus-visible h3{
    color:#D56733;
}


/* ----- TABLET ----- */

@media (max-width:980px){
    .home-mosaic{
        grid-template-columns:1fr 1fr;
        grid-template-rows:none;
        grid-auto-rows:330px;
        gap:14px;
    }

    .home-mosaic > :nth-child(n){
        grid-column:auto;
        grid-row:auto;
    }

    .home-mosaic > :nth-child(1),
    .home-mosaic > :nth-child(4){
        grid-column:1 / 3;
    }

    .home-mosaic > .home-first-cut{
        min-height:130px;
    }

    .home-mosaic .home-story h3{
        color:#F3E3CA;
    }

    .home-mosaic .home-story p{
        color:rgba(243,227,202,.82);
    }
}


/* ----- MOBILE ----- */

@media (max-width:680px){
    .home-mosaic{
        grid-template-columns:1fr;
        grid-auto-rows:350px;
        gap:14px;
    }

    .home-mosaic > :nth-child(n),
    .home-mosaic > :nth-child(1),
    .home-mosaic > :nth-child(4){
        grid-column:1;
        grid-row:auto;
    }

    .home-mosaic > .home-first-cut{
        min-height:150px;
    }

    .home-mosaic .home-story h3{
        color:#F3E3CA;
        font-size:30px;
    }

    .home-mosaic .home-story p{
        color:rgba(243,227,202,.82);
        font-size:16px;
    }

    .home-first-cut p{
        font-size:16px;
    }
}


/* =========================================================
   HOMEPAGE MOSAIC — FINAL TEXT COLORS
   One source for desktop, tablet and mobile Test Kitchen tiles.
   ========================================================= */

.home-mosaic .home-story,
.home-mosaic .home-story:link,
.home-mosaic .home-story:visited{
    color:#F3E3CA;
    background:#171513;
}

.home-mosaic .home-story h3,
.home-mosaic .home-story:link h3,
.home-mosaic .home-story:visited h3{
    color:#F3E3CA;
}

.home-mosaic .home-story p,
.home-mosaic .home-story:link p,
.home-mosaic .home-story:visited p{
    color:rgba(243,227,202,.82);
}

.home-mosaic .home-story .home-text-link{
    color:#D56733;
}

@media(max-width:680px){
    .home-mosaic .home-story h3,
    .home-mosaic .home-story:link h3,
    .home-mosaic .home-story:visited h3{
        color:#F3E3CA;
    }

    .home-mosaic .home-story p,
    .home-mosaic .home-story:link p,
    .home-mosaic .home-story:visited p{
        color:rgba(243,227,202,.82);
    }
}





/* =========================================================
   HOMEPAGE — EXACT TEST KITCHEN RESULT STAMPS
   Uses the canonical Test Kitchen SVG assets.
   ========================================================= */
.home-mosaic .home-status-stamp{
    position:absolute;
    z-index:5;
    top:16px;
    right:16px;
    display:block;
    width:72px;
    height:auto;
    margin:0;
    padding:0;
    border:0;
    background:none;
    box-shadow:none;
}

@media(max-width:680px){
    .home-mosaic .home-status-stamp{
        top:14px;
        right:14px;
        width:68px;
    }
}


/* =========================================================
   HOMEPAGE — CANONICAL RESULT STAMPS, CORRECT SCALE
   Exact Test Kitchen SVGs, constrained as corner badges.
   ========================================================= */
.home-mosaic .home-status-stamp{
    position:absolute !important;
    z-index:6 !important;
    top:16px !important;
    right:16px !important;

    width:72px !important;
    max-width:72px !important;
    height:42px !important;
    max-height:42px !important;

    object-fit:contain !important;
    object-position:center !important;

    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    transform:none !important;
}

@media(max-width:680px){
    .home-mosaic .home-status-stamp{
        top:13px !important;
        right:13px !important;
        width:64px !important;
        max-width:64px !important;
        height:38px !important;
        max-height:38px !important;
    }
}
