/* The Garden of Mathly Delights — shared site chrome
   Tokens + homepage layout. Individual simulations are self-contained and
   need not use this file; it exists to keep the site (homepage + wrappers)
   cohesive. */

:root {
  /* garden — light: fresh herbarium */
  --bg:#d8ecc0; --bg-2:#e8f4d1; --ink:#1f2a17; --ink-2:#547042;
  --line:#bcd493; --gold:#a97d1f; --coral:#bd576f; --green:#3f7a2c; --blue:#6b4f9c; --bark:#64584e; --leaf:#5aa62f; --leaf2:#7ecb45;
  --vitrine:#0a0f0a; --shadow:0 14px 32px rgba(24,42,12,.18);
  --serif:"Hoefler Text","Baskerville","Palatino Linotype",Georgia,"Times New Roman",serif;
  --sans:"Optima","Avenir Next","Gill Sans","Gill Sans MT",ui-sans-serif,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --display:"Snell Roundhand","Snell Roundhand SC","Apple Chancery","Brush Script MT",cursive;
  color-scheme:light;   /* the garden keeps one fixed light palette, regardless of OS dark mode */
}

* { box-sizing:border-box; }
body { margin:0; }
.page {
  background:var(--bg); color:var(--ink); min-height:100vh;
  font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden;
  display:flex; flex-direction:column;
}

/* ---------- masthead ---------- */
.masthead {
  position:relative; overflow:hidden;
  display:flex; align-items:stretch;
  border-bottom:1px solid var(--line);
}
/* logo canvas fills the full header height, flush to the left edge (no padding) */
.logo { flex:none; align-self:stretch; width:clamp(88px,11vw,126px); height:auto; display:block; }
/* the text block sets the header height and carries its own spacing */
.mast-text { position:relative; z-index:1; min-width:0; align-self:center;
  padding:.85rem clamp(1rem,3vw,1.7rem) .85rem .4rem; }
.brand {
  margin:0; font-family:var(--display); font-weight:700;
  font-size:clamp(1.45rem,3.2vw,2.05rem); letter-spacing:.005em; line-height:1.05;
}
.subtitle {
  margin:.22rem 0 0; font-size:.82rem; color:var(--ink-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- garden grid ---------- */
.grid {
  flex:1; width:100%; margin:0 auto; max-width:82rem;
  padding:clamp(.7rem,1.6vw,1.1rem) clamp(.7rem,3vw,1.7rem);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.85rem,1.4vw,1.3rem);
  align-content:start;
}
@media (max-width:780px){ .grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .grid { grid-template-columns:1fr; } }

.specimen {
  display:block; text-decoration:none; color:inherit;
  background:var(--bg-2); border:1px solid var(--line); border-radius:3px;
  padding:.45rem .45rem .5rem;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.specimen:hover, .specimen:focus-visible { transform:translateY(-4px); border-color:var(--gold); box-shadow:var(--shadow); outline:none; }
.specimen:focus-visible { box-shadow:0 0 0 2px var(--gold); }

.vitrine {
  position:relative; aspect-ratio:16/9; border-radius:2px; overflow:hidden;
  background:var(--vitrine); border:1px solid color-mix(in srgb,var(--gold) 55%,var(--line));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);
}
.vitrine img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.vitrine img.missing { display:none; }              /* graceful fallback until a preview.png exists */
.specimen:hover .vitrine img { transform:scale(1.06); }

.tag {
  position:absolute; left:.4rem; top:.4rem; z-index:2;
  font-family:var(--mono); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase;
  color:#ece3cf; background:rgba(8,12,9,.6);
  border:1px solid rgba(216,169,74,.4); padding:.16rem .4rem; border-radius:2px; backdrop-filter:blur(3px);
}
.desc {
  position:absolute; left:0; right:0; bottom:0; z-index:2; margin:0;
  padding:1.6rem .6rem .55rem; font-size:.78rem; line-height:1.4; color:#ece3cf;
  background:linear-gradient(to top, rgba(8,12,9,.96) 40%, rgba(8,12,9,0));
  transform:translateY(101%); transition:transform .26s ease;
}
.specimen:hover .desc, .specimen:focus-visible .desc { transform:translateY(0); }

.cap { display:flex; align-items:center; justify-content:space-between; gap:.4rem; margin:.5rem .1rem 0; }
.cap h3 {
  font-family:var(--serif); font-weight:600; font-size:.96rem; letter-spacing:-.01em; margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cap .arrow { color:var(--gold); opacity:0; transition:opacity .2s ease; font-size:.9rem; }
.specimen:hover .arrow, .specimen:focus-visible .arrow { opacity:1; }

/* ---------- footer ---------- */
footer {
  border-top:1px solid var(--line);
  display:flex; align-items:baseline; gap:.5rem 1.4rem; flex-wrap:wrap; justify-content:space-between;
  padding:.6rem clamp(1rem,3vw,1.7rem);
  font-size:.74rem; color:var(--ink-2);
}
.wordmark { font-family:var(--serif); font-size:.95rem; color:var(--ink); }
.wordmark b { color:var(--gold); font-weight:600; }
footer .mono { font-family:var(--mono); letter-spacing:.04em; }

/* ---------- simple "back to the garden" link for wrapper/placeholder pages ---------- */
.back {
  display:inline-block; margin:0; font-family:var(--mono); font-size:.74rem;
  letter-spacing:.08em; color:var(--ink-2); text-decoration:none;
}
.back:hover { color:var(--gold); }

@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }