/* Minimal, clean styles. Tweak freely. */
:root {
  --bg: #fff4e6;
  --card: #ffffff;
  --text: #494949;
  --muted: #ffeed2;
  --brand: #6ee7b7;
  --accent: #42311b;
}

* { box-sizing: border-box; border: solid #ffffff 0px;}
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Bebas Neue", 'Apple Color Emoji', 'Segoe UI Emoji'; }
.brand, h1, h2, h3, h4, h5, h6, a {font-family: "Bebas Neue"; font-weight:300;}
img { max-width: 100%; display: block; }

.container { width: min(1100px, 92vw); margin-inline: auto; }

.site-header { position: sticky; top: 0; background: var(--accent); backdrop-filter: blur(20px); border-bottom: 1px solid; #1e1f27; z-index: 20; font-size: 1.3rem; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0;}
.brand { font-weight: 400; letter-spacing: 0.5px; color: var(--muted); text-decoration: none; }
.nav a { color: var(--muted); margin-left: 18px; text-decoration: none; }
.nav a.active, .nav a:hover { color: var(--muted); }

.hero { padding: 64px 0 32px; text-align: center; }
.hero h1 { font-weight: 200; font-size: clamp(1.5rem, 3.5vw, 4rem); margin: 0 0 8px; }
.hero p { color: var(--text); margin:20px; text-align:center;}

.button { display: inline-block; padding: 10px 16px; border-radius: 999px; text-decoration: none; color: var(--text); background: transparent; border: 4px solid #ffeed2; transition: transform .06s ease, background .2s ease; align-items: center;}
.pre-button { display: inline-block; padding: 10px 16px; border-radius: 999px; text-decoration: none; color: var(--card); background: var(--accent); border: 4px solid #ffeed2; transition: transform .06s ease, background .2s ease; align-items: center;}
.button:hover { transform: translateY(-5px); }
.pre-button:hover { transform: translateY(-5px); }
.button.primary { background: var(--accent); color: var(--bg); border-color: transparent; font-weight: 600; align-content: center;}
.center.button {background: var(--accent); color: var(--bg); border-color: transparent; font-weight: 400; display:block; text-align:center;}
.email.button { display: inline-block; padding: 10px 16px; border-radius: 999px; text-decoration: none; color: var(--text); background: #ffeed2; border: 4px solid #ffeed2; transition: transform .06s ease, background .2s ease; align-items: center;}


h2 { margin-top: 32px; font-size: 1.4rem; text-align: center; font-weight: 200; }
h3 { margin-top: 32px; font-size: 1.8rem; text-align: center; font-weight: 200; }
h4 { margin-top: 5px; font-size: 1.4rem; text-align: center; font-weight: 200; }
h5 { margin-top: 5px; font-size: 4rem; text-align: center; font-weight: 300; }
p { margin-top: 32px; font-size: 1.4rem; text-align: center; font-weight: 200; }

.grid.cards {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 3fr)); margin-top: 12px; margin:30px;}
.card { background: var(--card); border-radius: 16px; overflow: hidden; display: flex ; flex-direction: column;}
.card-body { padding: 14px; display: grid; gap: 10px; }
.card-actions { display: flex; gap: 8px; }
.card { position: relative; margin:30px;}
.card-body { position: relative; }

.stretched-link { position: static; }
.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;              /* cover the entire card */
  z-index: 1;
}
.card-actions .button { position: relative; z-index: 2; }  /* keep buttons above the link */

.site-footer { text-align:center; margin-top: 48px; background:var(--accent); text}
.site-footer .container { padding: 20px 0; color: var(--muted); }

.form-embeds { display: grid; gap: 24px; }
.form-embed { background: var(--card); border: 1px solid #1e1f27; border-radius: 12px; padding: 16px; }

/* Product page layout */
.product-grid { display: grid; gap: 20px; }
@media (min-width: 900px) {
  .product-grid { grid-template-columns: 1.1fr .9fr; align-items: start; }
}

/* Gallery */
.hero-img { width: 100%; border-radius: 12px; background: #0f1016; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 10px; margin-top: 10px; }
.thumbs .thumb {
  background: transparent; border: 1px solid #2a2b34; border-radius: 8px; padding: 0; cursor: pointer;

}
.thumbs .thumb[aria-current="true"] { outline: 2px solid var(--brand); outline-offset: 2px; }
.thumbs img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; }

.figure-center { margin: 0 auto; text-align: center; max-width: 900px; }
.figure-center img { width: 100%; height: auto; }

.card-actions { 
  justify-content: center;          /* center the buttons row */
}

.gmthreads-img{
  display:block;
  margin-inline:auto;
  max-width:25%;
  height:auto;
}

.float-img{
  float: left;
}