:root{
  --bg:#000;
  --fg:#fff;
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.55);
  --line:rgba(255,255,255,.12);
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.09);
  --accent:#f28c28; /* subtle orange nod to the logo */
  --serif:"Cinzel",serif;
  --sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; font-size:.95em}

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

.skip{
  position:absolute; left:-999px; top:10px;
  background:#111; border:1px solid var(--line);
  padding:.6rem .9rem; border-radius:999px;
}
.skip:focus{left:14px; z-index:10}

.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:.75rem 0;
}
.brand{
  display:flex; align-items:center;
  gap:.75rem;
  min-width:160px;
}
.brand-logo{
  width:220px;
  height:auto;
}

.nav{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; justify-content:flex-end}
.nav a{opacity:.9}
.nav a:hover{opacity:1}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.68rem 1rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.08);
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
  font-weight:600;
}
.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent}

.hero{
  padding:4.5rem 0 2.2rem;
}
.title{
  margin:0 0 .85rem;
  font-family:var(--serif);
  letter-spacing:.02em;
  font-size:clamp(2rem, 3.3vw, 3rem);
  font-weight:600;
}
.subtitle{
  max-width:66ch;
  color:var(--muted);
  margin:0 0 1.3rem;
  font-size:1.05rem;
}
.hero-actions{display:flex; gap:.75rem; flex-wrap:wrap}
.note{
  margin-top:1.25rem;
  color:var(--muted2);
  font-size:.95rem;
}

.section{padding:3.1rem 0}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; flex-wrap:wrap}
.section-title{
  margin:0;
  font-family:var(--serif);
  letter-spacing:.04em;
  font-weight:600;
  font-size:1.7rem;
}
.section-subtitle{margin:0; color:var(--muted2)}

/* Marquee gallery */
.marquee{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:linear-gradient(to bottom, rgba(255,255,255,.03), rgba(255,255,255,.01));
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.marquee::-webkit-scrollbar{display:none}

.marquee-track{
  display:flex;
  gap:18px;
  padding:18px;
  width:max-content;
  animation: marquee linear infinite;
  animation-duration: var(--marquee-duration, 55s);
}
.marquee:hover .marquee-track{animation-play-state:paused}

.tile{
  margin:0;
  width: min(520px, 78vw);
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
}
.tile img{
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.03) saturate(1.02);
}

@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.gallery-hint{
  margin:1rem 0 0;
  color:var(--muted2);
  font-size:.95rem;
}

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}
.card{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:var(--radius);
  padding:1.1rem 1.1rem;
}
.card:hover{background:var(--card2)}
.card h3{margin:.1rem 0 .45rem; font-family:var(--serif); letter-spacing:.03em}
.card p{margin:0; color:var(--muted)}

.split{display:grid; grid-template-columns: 1.35fr .65fr; gap:1rem; align-items:start}

.form{display:flex; flex-direction:column; gap:.85rem; margin-top:.3rem}
label span{display:block; color:var(--muted2); font-size:.95rem; margin-bottom:.25rem}
input,textarea{
  width:100%;
  padding:.75rem .85rem;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.35);
  color:var(--fg);
  outline:none;
}
input:focus,textarea:focus{border-color:rgba(255,255,255,.25); box-shadow:0 0 0 3px rgba(242,140,40,.16)}

.stack{display:flex; flex-direction:column; gap:.75rem}
.divider{height:1px; background:var(--line); margin:1.15rem 0}
.fine{margin:.5rem 0 0; color:var(--muted2); font-size:.92rem}

.footer{
  border-top:1px solid var(--line);
  padding:1.1rem 0;
  color:var(--muted2);
}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.footer-brand{
  font-family:var(--serif);
  letter-spacing:.08em;
  color:rgba(255,255,255,.92);
}
.muted{color:var(--muted2)}

/* Responsive */
@media (max-width: 920px){
  .grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .brand-logo{width:200px}
}

@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none}
  .btn{transition:none}
}