@import url('https://fonts.googleapis.com/css?family=Black+Ops+One|Cardo:400i|Rubik:400,700&display=swap');
:root { --d: 700ms; --e: cubic-bezier(.19,1,.22,1); --font-sans: 'Rubik',sans-serif; --font-serif: 'Cardo',serif; --font-danger:'Black Ops One',Impact,sans-serif; }
* { box-sizing: border-box; }
html { min-height:100%; background:#090a0c url('Images/road-marking-cloudy.jpg') center/cover fixed no-repeat; }
body { min-height:100vh; display:grid; place-items:center; position:relative; background:transparent; }
body::before { content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background:rgba(5,8,12,.28); }
.site-brand { position:fixed; top:clamp(1rem,3vw,2rem); left:clamp(1rem,3vw,2rem); z-index:2; color:#e7e3da; font-family:var(--font-danger); font-size:clamp(1.5rem,3vw,2.6rem); letter-spacing:.035em; line-height:1; text-decoration:none; -webkit-text-stroke:1.5px #080808; paint-order:stroke fill; text-shadow:0 2px 0 #000,0 0 5px #000,0 0 11px rgba(187,22,22,.95),0 5px 14px rgba(0,0,0,.95); }
.site-brand:hover,.site-brand:focus-visible { color:#fffaf0; text-shadow:0 2px 0 #000,0 0 5px #000,0 0 15px rgba(225,35,35,1),0 5px 14px rgba(0,0,0,.95); }
.site-brand:focus-visible { outline:2px dashed #b72d2d; outline-offset:5px; }
.page-content { width: 100%; display: grid; gap: 1rem; padding: clamp(1rem,4vw,3rem); max-width: 1120px; margin: 0 auto; position: relative; z-index: 1; font-family: var(--font-sans); }
@media (min-width:600px) { .page-content { grid-template-columns:repeat(2,1fr); } }
@media (min-width:800px) { .page-content { grid-template-columns:repeat(4,1fr); } }
.card { position:relative; display:flex; align-items:flex-end; overflow:hidden; padding:1rem; width:100%; min-height:350px; text-align:center; color:whitesmoke; background-color:#29201b; border:1px solid rgba(255,255,255,.16); box-shadow:0 22px 55px rgba(0,0,0,.48); }
.card::before { content:''; position:absolute; inset:0; width:100%; height:110%; background-size:cover; background-position:center; transition:transform calc(var(--d)*1.5) var(--e); pointer-events:none; }
.card::after { content:''; display:block; position:absolute; inset:0; width:100%; height:200%; pointer-events:none; background-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,.82) 100%); transform:translateY(-50%); transition:transform calc(var(--d)*2) var(--e); }
.card:nth-child(1)::before { background-image:url('Images/Bella.jpg'); }
.card:nth-child(2)::before { background-image:url('https://images.unsplash.com/photo-1533903345306-15d1c30952de?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'); }
.card:nth-child(3)::before { background-image:url('https://images.unsplash.com/photo-1545243424-0ce743321e11?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'); }
.card:nth-child(4)::before { background-image:url('Images/gracies-recipes-card.png'); }
.content { position:relative; display:flex; flex-direction:column; align-items:center; width:100%; padding:1rem; transition:transform var(--d) var(--e); z-index:1; }
.content>*+* { margin-top:1rem; }
.title { font-size:1.3rem; font-weight:bold; line-height:1.2; }
.copy { font-family:var(--font-serif); font-size:1.125rem; font-style:italic; line-height:1.35; }
.btn { cursor:pointer; margin-top:1.5rem; padding:.75rem 1.5rem; font-size:.65rem; font-weight:bold; letter-spacing:.025rem; text-transform:uppercase; color:white; background:#0d0d0d; border:1px solid rgba(255,255,255,.25); }
.card[href] { text-decoration:none; }
.btn:hover { background:#2a1710; }
.btn:focus { outline:1px dashed #ffd27d; outline-offset:3px; }
@media (hover:hover) and (min-width:600px) {
  .card::after { transform:translateY(0); }
  .content { transform:translateY(calc(100% - 4.5rem)); }
  .content>:not(.title) { opacity:0; transform:translateY(1rem); transition:transform var(--d) var(--e),opacity var(--d) var(--e); }
  .card:hover,.card:focus-within { align-items:center; }
  .card:hover::before,.card:focus-within::before { transform:translateY(-4%); }
  .card:hover::after,.card:focus-within::after { transform:translateY(-50%); }
  .card:hover .content,.card:focus-within .content { transform:translateY(0); }
  .card:hover .content>:not(.title),.card:focus-within .content>:not(.title) { opacity:1; transform:translateY(0); transition-delay:calc(var(--d)/8); }
}
@media (max-width:599px) { html { background-attachment:scroll; } .site-brand { position:absolute; } .page-content { padding:4.5rem 1rem 1rem; } .card { min-height:320px; } }