/* The home page (design/home/round4/sheet-H2.jpg, "Bands of colour"). Everything is under .h2. */
.h2{--cream:#FBF4E8;--plum:#4B2E45;--terra:#C2603C;--rose:#E9C9C1;--olive:#7A7A3A;--mauve:#7B4A6F;
  --serif:'Lora',Georgia,serif;--sans:'Montserrat',Arial,sans-serif;
  background:var(--cream);color:var(--plum);font-family:var(--sans);overflow:hidden}
.h2 a{color:inherit;text-decoration:none}
.h2 h1,.h2 h2{font-family:var(--serif);font-weight:500;color:var(--plum);margin:0;letter-spacing:-.01em}
.h2 section{padding-left:max(24px,calc((100% - 1180px)/2));padding-right:max(24px,calc((100% - 1180px)/2))}

/* the kitchen picture, edge to edge under the header */
.h2 .h2-hero{position:relative;padding:0;background:#3a2318;line-height:0}
.h2-hero img{display:block;width:100%;height:min(56.25vw,78vh);min-height:260px;object-fit:cover;object-position:50% 22%}
.h2-hero::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;background:linear-gradient(rgba(30,16,10,.62),rgba(30,16,10,0));pointer-events:none}

.h2-welcome{padding-top:56px;padding-bottom:28px;text-align:center}
.h2-welcome h1{font-size:clamp(32px,4.2vw,56px);line-height:1.1}
.h2-welcome p{margin:14px 0 0;font-size:clamp(16px,1.35vw,20px);font-weight:400}

/* the three tiles: a photo washed in the tile's colour */
.h2-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1000px;margin:40px auto 0}
.h2-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1.08;
  background:var(--c);overflow:hidden;isolation:isolate;transition:transform .35s ease}
.h2-tile--recipes{--c:#C2603C;--deep:#4f1f0d}
.h2-tile--travel{--c:#8a8a42;--deep:#2e2e0c}
.h2-tile--about{--c:#93598a;--deep:#4a2441}
.h2-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(1.08);
  mix-blend-mode:multiply;z-index:-2;transition:transform .6s ease}
.h2-tile--about img{object-position:70% 20%;filter:grayscale(1) contrast(.9) brightness(1.9)}
.h2-tile::before{content:"";position:absolute;inset:0;background:var(--deep);mix-blend-mode:screen;z-index:-1}
.h2-tile::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.28),rgba(0,0,0,.08) 70%);z-index:-1}
.h2-tile:hover img{transform:scale(1.05)}
.h2-tile__name{font-family:var(--serif);font-weight:500;font-size:clamp(22px,3.2vw,42px);color:#FBF4E8;line-height:1.1;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.h2-tile__sub{margin-top:8px;font-size:clamp(12px,1.2vw,17px);font-weight:500;color:#FBF4E8;text-shadow:0 1px 8px rgba(0,0,0,.4)}

.h2-latest{padding-top:44px;padding-bottom:64px}
.h2-latest h2{font-size:clamp(26px,2.6vw,36px)}
.h2-posts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:26px}
.h2-post{display:block}
.h2-post img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--rose)}
.h2-post b{display:block;margin-top:12px;font-family:var(--serif);font-weight:500;font-size:clamp(17px,1.5vw,21px);line-height:1.2}
.h2-post small{display:block;margin-top:6px;font-size:15px;font-weight:500;color:#6b5560}
.h2-post:hover b{text-decoration:underline;text-underline-offset:3px}

/* recipe categories on the plum band */
.h2 .h2-cats{background:var(--plum);padding-top:64px;padding-bottom:64px}
.h2-cats nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 40px;max-width:1100px;margin:0 auto}
.h2-cats a{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.5vw,34px);line-height:1.3;color:#FBF4E8;white-space:nowrap}
.h2-cats a:hover{color:var(--rose)}

.h2-trips{padding-top:64px;padding-bottom:56px;text-align:center}
.h2-trips h2{font-size:clamp(26px,3vw,40px);line-height:1.15;max-width:18em;margin:0 auto}
.h2-triprow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px}
.h2-trip{position:relative;display:block;overflow:hidden}
.h2-trip img{display:block;width:100%;aspect-ratio:.86;object-fit:cover;transition:transform .6s ease}
.h2-trip:hover img{transform:scale(1.04)}
.h2-trip::after{content:"";position:absolute;inset:0;background:rgba(40,20,30,.22)}
.h2-trip span{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:500;
  font-size:clamp(24px,3.2vw,44px);color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.h2 .h2-more{display:inline-block;margin-top:26px;font-size:17px;font-weight:500;text-decoration:underline;text-underline-offset:4px}

.h2 .h2-about{background:var(--rose);padding-top:56px;padding-bottom:52px;text-align:center}
.h2-about p{font-family:var(--serif);font-weight:500;font-size:clamp(19px,2vw,27px);line-height:1.4;max-width:30em;margin:0 auto}

.h2-foot{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;background:var(--plum);
  padding:30px max(24px,calc((100% - 1180px)/2))}
.h2 .h2-foot a{color:#FBF4E8}
.h2-foot__name{font-family:var(--serif);font-weight:500;font-size:28px}
.h2-foot nav{display:flex;flex-wrap:wrap;gap:8px 30px;font-size:15px;font-weight:500}
.h2-foot nav a:hover{text-decoration:underline}

@media (max-width:760px){
  .h2-hero img{height:66vw}
  .h2-welcome{padding-top:36px}
  .h2-tiles{gap:8px;margin-top:28px}
  .h2-tile{aspect-ratio:.72}
  .h2-tile__name{font-size:clamp(13px,4.1vw,26px)}
  .h2-tile__sub{font-size:11px;text-align:center;padding:0 4px}
  .h2-posts{grid-template-columns:repeat(2,1fr);gap:22px 12px}
  .h2-latest{padding-bottom:44px}
  .h2 .h2-cats{padding-top:44px;padding-bottom:44px}
  .h2-cats nav{flex-direction:column;align-items:center;gap:6px}
  .h2-cats a{white-space:normal;text-align:center}
  .h2-triprow{grid-template-columns:1fr;gap:10px}
  .h2-trip img{aspect-ratio:1.8}
  .h2-foot{flex-direction:column;text-align:center}
  .h2-foot nav{justify-content:center}
}