:root{
  --green:#0d382d; --green2:#31584b; --gold:#b88125; --cream:#fbf8ef;
  --card:rgba(255,253,246,.82); --line:rgba(154,128,80,.28); --shadow:0 12px 28px rgba(45,38,22,.15);
  --radius:16px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;color:#112b24;font-family:Georgia,'Times New Roman',serif;background:#f8f4ea url('images/background-desktop.png') top center/cover no-repeat fixed;}
a{color:inherit}.skip-link{position:absolute;left:-999px}.skip-link:focus{left:1rem;top:1rem;z-index:99;background:white;padding:.5rem 1rem;border-radius:8px}.page-shell{max-width:1536px;margin:0 auto;padding:42px 32px 24px}.hero{text-align:center;min-height:330px;display:flex;flex-direction:column;align-items:center}.ornament{color:var(--gold);font-size:42px;line-height:1}.hero h1{font-size:clamp(56px,7vw,98px);line-height:.88;margin:10px 0 12px;text-transform:uppercase;letter-spacing:.04em;font-weight:500;color:var(--green)}.hero h1 a{text-decoration:none}.tagline{text-transform:uppercase;letter-spacing:.32em;color:#945e19;font-size:16px;margin:0 0 18px}.tagline span{letter-spacing:0;margin:0 8px}.small-leaf{color:var(--gold);margin-bottom:10px}.mission{font-size:21px;line-height:1.45;margin:0}.mobile-break{display:none}.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(240px,1fr));gap:12px}.project-card{min-height:168px;display:grid;grid-template-columns:124px 1fr;gap:14px;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);text-decoration:none;backdrop-filter:blur(3px);transition:transform .15s ease, box-shadow .15s ease}.project-card:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(45,38,22,.2)}.icon{width:104px;height:104px;border:1px solid rgba(94,122,103,.35);border-radius:50%;display:grid;place-items:center;background:rgba(255,255,250,.65);font-size:54px;color:var(--green2);box-shadow:0 6px 14px rgba(0,0,0,.08)}.card-text{min-width:0}.card-text h2{font-size:18px;text-transform:uppercase;line-height:1.22;margin:2px 0 6px;color:#123b31;font-weight:500}.subtitle{font-style:italic;color:#0f5a4d;margin:0 0 8px;font-size:14px}.red h2,.red .subtitle,.red .url{color:#8c2020}.blue h2,.blue .subtitle,.blue .url{color:#1d2193}.gold h2,.gold .subtitle,.gold .url{color:#9b5a0f}.teal h2,.teal .subtitle,.teal .url{color:#166e66}.card-text p:not(.subtitle){font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;line-height:1.35;margin:0 0 8px;color:#1c211d}.url{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.42);border:1px solid rgba(154,128,80,.14);font-size:15px}.profile-card{border:1px solid var(--line);border-radius:22px;background:rgba(255,253,246,.86);box-shadow:var(--shadow);padding:22px 24px;backdrop-filter:blur(4px)}.profile-top{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start}.profile-top img{width:96px;height:96px;object-fit:cover}.profile-card h2{font-size:30px;line-height:1;margin:0 0 8px;color:var(--green);font-weight:500}.profile-card p{font-family:system-ui,-apple-system,Segoe UI,sans-serif;margin:0;line-height:1.35}.email-row{display:block;text-decoration:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:18px 0;padding:13px 0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px}.profile-card h3{text-align:center;text-transform:uppercase;font-weight:500;letter-spacing:.06em;color:var(--green);margin:8px 0 14px}.social-list{list-style:none;margin:0;padding:0}.social-list li+li{border-top:1px solid rgba(154,128,80,.18)}.social-list a{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center;text-decoration:none;padding:8px 0;font-family:system-ui,-apple-system,Segoe UI,sans-serif}.social-list strong{display:block;font-size:14px}.social-list small{display:block;font-size:13px}.badge{grid-row:span 2;width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:white;font-weight:700;font-size:15px;box-shadow:0 3px 7px rgba(0,0,0,.2)}.youtube{background:#cf1f16}.x{background:#111}.linkedin{background:#1679b9}.telegram{background:#36aee2}.boosty{background:#f06a2f}.instagram{background:linear-gradient(135deg,#7a39ff,#ff2e80,#ffb13b)}.bluesky{background:#1685ff}.mail{background:#315f3e}.extra-domains{margin:18px 0 10px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.extra-domains a{font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:13px;text-decoration:none;border:1px solid var(--line);background:rgba(255,253,246,.68);padding:7px 10px;border-radius:999px}.footer-bar{display:grid;grid-template-columns:1.05fr 1.55fr 1.45fr 1.35fr;gap:22px;align-items:center;border:1px solid var(--line);border-radius:14px;background:rgba(255,253,246,.76);box-shadow:var(--shadow);padding:14px 22px}.footer-bar p{font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;line-height:1.35;margin:0}.footer-bar em{font-family:Georgia,'Times New Roman',serif;font-size:15px}
@media (max-width:1200px){.page-shell{padding:32px 22px}.content-grid{grid-template-columns:1fr}.profile-card{max-width:760px;margin:0 auto}.project-grid{grid-template-columns:repeat(2,minmax(250px,1fr))}.hero{min-height:300px}.footer-bar{grid-template-columns:1fr 1fr}}
@media (max-width:760px){body{background-image:url('images/background-mobile.png');background-size:cover;background-attachment:scroll}.page-shell{padding:26px 14px}.hero{min-height:300px}.mobile-break{display:block}.hero h1{font-size:clamp(40px,13vw,62px)}.tagline{font-size:12px;letter-spacing:.16em}.mission{font-size:17px}.project-grid{grid-template-columns:1fr}.project-card{grid-template-columns:82px 1fr;gap:12px;min-height:0;padding:12px}.icon{width:72px;height:72px;font-size:38px}.card-text h2{font-size:16px}.card-text p:not(.subtitle){font-size:13px}.url{font-size:13px;padding:7px 10px}.profile-top{grid-template-columns:78px 1fr}.profile-top img{width:78px;height:78px}.profile-card{padding:18px}.profile-card h2{font-size:26px}.footer-bar{grid-template-columns:1fr}.extra-domains{justify-content:flex-start}}


/* --- 2026-06-23 responsive correction ---
   The background artwork already contains the big Create Worlds Dancing title.
   We keep the HTML h1 for accessibility/SEO, but visually hide it to prevent
   the duplicated/overlapping title seen in browser screenshots. */
.hero h1{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.hero{
  position:relative;
  min-height:clamp(360px,38vw,540px);
  justify-content:flex-end;
  padding-bottom:clamp(34px,5vw,74px);
}
.ornament{
  margin-top:clamp(10px,2vw,28px);
}
.tagline,
.small-leaf,
.mission{
  position:relative;
  z-index:2;
  max-width:900px;
  text-shadow:0 1px 0 rgba(255,255,255,.72);
}
.mission{
  background:rgba(251,248,239,.52);
  border-radius:18px;
  padding:8px 18px;
}
.project-card{
  align-items:center;
}
.card-text{
  min-width:0;
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.card-text h2,
.subtitle,
.card-text p:not(.subtitle){
  overflow-wrap:break-word;
}
.url{
  margin-top:10px;
}
.profile-card{
  overflow:hidden;
}
@media (min-width:1201px){
  .content-grid{align-items:stretch;}
}
@media (max-width:760px){
  .hero{
    min-height:clamp(320px,92vw,520px);
    padding-bottom:28px;
  }
  .tagline{font-size:12px;letter-spacing:.14em;}
  .mission{font-size:16px;padding:8px 12px;}
  .project-card{align-items:center;}
  .card-text{justify-content:center;}
}


/* --- 2026-06-23 link-position correction ---
   Place the visible URL button at the bottom center of the whole project card,
   not at the lower-right inside the text column. */
.project-card{
  grid-template-rows:auto auto;
}
.project-card > .url{
  grid-column:1 / -1;
  justify-self:center;
  width:min(100%, 340px);
  margin:4px auto 0;
}
.card-text .url{
  display:none;
}
@media (max-width:760px){
  .project-card > .url{
    width:min(100%, 330px);
    margin-top:8px;
  }
}