/* CAHILLANE — shared design system
   Dark, restrained, image-first. Mobile-first. */

:root {
  --bg:#0a0a0c;
  --ink:#e9e7e2;
  --ink-bright:#f2f0ea;
  --muted:#8e8c85;
  --muted-2:#7c7a74;
  --line:rgba(233,231,226,.14);
  --line-strong:rgba(233,231,226,.30);
  --panel:rgba(10,10,12,.55);
  --dot-available:#6fae84;
  --dot-reserved:#caa45a;
  --dot-sold:#b25b51;
  --serif:'DM Sans',sans-serif;
  --display:'Avenir Next','League Spartan',sans-serif;
  --maxw:1100px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--ink);
  font-family:var(--serif); font-weight:300; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }

.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.eyebrow { font-size:11px; letter-spacing:.5em; text-indent:.5em; text-transform:uppercase; color:var(--muted); }
.rule { width:42px; height:1px; background:var(--line-strong); margin:40px auto; }
.dim { color:var(--muted); }

/* ---------- Header / nav ---------- */
.site-header {
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,12,.95);
  border-bottom:1px solid var(--line);
}
.nav-inner {
  max-width:var(--maxw); margin:0 auto; padding:14px 24px; position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.nav-word {
  font-family:var(--display); font-weight:600;
  font-size:14px; letter-spacing:.2em; text-indent:.2em; color:var(--ink-bright); white-space:nowrap;
}
.nav-links { display:flex; gap:30px; }
.nav-links a {
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  transition:color .2s;
}
.nav-links a:hover, .nav-links a.active { color:var(--ink-bright); }
.nav-close { display:none; }
.nav-toggle {
  display:none; background:none; border:0; cursor:pointer; padding:0;
  position:relative; width:22px; height:14px;
}
.nav-toggle span { position:absolute; left:0; top:50%; transform:translateY(-50%); width:22px; height:1.5px; background:var(--ink-bright); }
.nav-toggle span::before, .nav-toggle span::after { content:''; position:absolute; left:0; width:22px; height:1.5px; background:var(--ink-bright); }
.nav-toggle span::before { top:-6px; }
.nav-toggle span::after { top:6px; }

@media (max-width:760px) {
  .nav-toggle { display:block; margin-left:auto; }
  .nav-word { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin:0; line-height:1; }
  .nav-links {
    position:fixed; inset:0; z-index:60;
    flex-direction:column; align-items:center; justify-content:center; gap:34px;
    background:rgba(8,8,10,.97); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    opacity:0; pointer-events:none; transition:opacity .3s;
  }
  .nav-links a { font-size:15px; letter-spacing:.22em; }
  body.menu-open .nav-links { opacity:1; pointer-events:auto; }
  body.menu-open { overflow:hidden; }
  .nav-close {
    position:fixed; top:16px; right:22px; z-index:61; display:none;
    background:none; border:0; color:var(--ink-bright); font-size:26px; cursor:pointer;
  }
  body.menu-open .nav-close { display:block; }
}

/* ---------- Buttons ---------- */
.btn {
  display:inline-block; padding:15px 30px; background:var(--ink-bright); color:var(--bg);
  border:0; cursor:pointer; font-family:var(--display); font-weight:600;
  font-size:11px; letter-spacing:.25em; text-transform:uppercase; transition:background .25s;
}
.btn:hover { background:#fff; }
.btn-ghost {
  background:transparent; color:var(--ink-bright); border:1px solid var(--line-strong);
}
.btn-ghost:hover { background:transparent; border-color:var(--ink-bright); }

/* ---------- Hero scroll cue ---------- */
.scroll-cue {
  position:absolute; left:0; right:0; bottom:30px; text-align:center;
  z-index:3; animation:cueBounce 2.2s ease-in-out infinite;
}
.scroll-cue span {
  display:inline-block; width:15px; height:15px;
  border-right:1.5px solid #f2f0ea; border-bottom:1.5px solid #f2f0ea;
  transform:rotate(45deg);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.7));
}
@keyframes cueBounce {
  0%, 100% { transform:translateY(0);  opacity:.6; }
  50%      { transform:translateY(8px); opacity:1; }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation:none; } }

/* ---------- Forms (signup / inquiry) ---------- */
.ajax-form { width:100%; max-width:440px; margin:0 auto; }
.fieldrow {
  display:flex; flex-wrap:wrap; border:1px solid var(--line-strong); background:var(--panel);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.fieldrow input[type=email] {
  flex:1 1 200px; padding:16px 18px; background:transparent; border:0; outline:0;
  color:var(--ink-bright); font:300 14px var(--serif); letter-spacing:.04em;
}
.fieldrow input::placeholder { color:var(--muted-2); }
.fieldrow .btn { flex:0 0 auto; }
@media (max-width:520px) {
  .fieldrow { flex-direction:column; }
  .fieldrow input[type=email] { flex:0 0 auto; width:100%; text-align:center; }
  .fieldrow .btn { width:100%; text-align:center; }
}
.form-hint { margin-top:14px; font-size:12px; color:var(--muted); letter-spacing:.06em; }
.form-success { display:none; margin-top:24px; font-size:14px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); }

.inquiry-form { max-width:480px; }
.inquiry-form label { display:block; margin-top:16px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.inquiry-form input, .inquiry-form textarea {
  width:100%; margin-top:6px; padding:13px 15px; background:var(--panel);
  border:1px solid var(--line-strong); color:var(--ink-bright); font:300 14px var(--serif); outline:0;
}
.inquiry-form textarea { min-height:110px; resize:vertical; }
.inquiry-form .btn { margin-top:22px; }

/* ---------- Hero ---------- */
.hero {
  position:relative; min-height:calc(100svh - 52px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:70px 24px 56px; overflow:hidden;
}
.hero .hero-bg { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center 38%; opacity:1; filter:brightness(1.5) contrast(1.04) saturate(1.12); }
.hero .hero-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,12,.5) 0%, rgba(10,10,12,.04) 32%, rgba(10,10,12,.08) 58%, rgba(10,10,12,.76) 100%);
}
.hero > * { position:relative; z-index:1; }
.wordmark {
  font-family:var(--display); font-weight:600;
  font-size:clamp(28px,6vw,54px); letter-spacing:.3em; text-indent:.3em; color:var(--ink-bright);
}
.wordmark span { display:block; line-height:1.08; }
.role { margin-top:18px; font-size:11px; letter-spacing:.5em; text-indent:.5em; text-transform:uppercase; color:var(--muted); }
.hook { max-width:560px; margin:0 auto; font-size:clamp(16px,4.2vw,20px); line-height:1.7; color:#d6d4cd; font-style:italic; }

/* ---------- Generic section ---------- */
.section { padding:84px 0; }
.section-tight { padding:54px 0; }
.center { text-align:center; }
.lead { max-width:600px; margin:24px auto 0; font-size:clamp(17px,4.4vw,21px); line-height:1.85; color:#cbc9c2; font-style:italic; }

/* ---------- Works grid ---------- */
.grid {
  display:grid; gap:20px; grid-template-columns:1fr; margin-top:44px;
}
@media (min-width:600px) { .grid { grid-template-columns:1fr 1fr; gap:24px; } }
@media (min-width:980px) { .grid.grid-3 { grid-template-columns:1fr 1fr 1fr; } }

.card { display:block; }
.card-img { position:relative; overflow:hidden; border:1px solid var(--line); background:#111; aspect-ratio:1/1; }
.card-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s, filter .5s; filter:saturate(.94) brightness(.97); }
.card:hover .card-img img { transform:scale(1.02); filter:saturate(1) brightness(1); }
.card-meta { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:12px; }
.card-title { font-size:14px; letter-spacing:.04em; color:var(--ink-bright); }
.card-sub { font-size:12px; color:var(--muted); }

/* availability dot */
.dot { display:inline-flex; align-items:center; gap:7px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.dot::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--muted); }
.dot.available::before { background:var(--dot-available); }
.dot.reserved::before { background:var(--dot-reserved); }
.dot.sold::before { background:var(--dot-sold); }

/* ---------- Work detail ---------- */
.work-detail { padding:40px 0 90px; }
.work-detail .work-images img { width:100%; aspect-ratio:1/1; object-fit:cover; height:auto; margin-bottom:14px; border:1px solid var(--line); }
.work-info { margin-top:34px; }
.work-info h1 { font-family:var(--display); font-weight:600; font-size:clamp(22px,5vw,30px); letter-spacing:.1em; color:var(--ink-bright); }
.work-info .specs { margin-top:16px; font-size:14px; color:var(--muted); line-height:2; }
.work-info .dot { margin-top:14px; font-size:11px; }
.work-info .work-desc { margin-top:22px; max-width:560px; color:#bdbbb4; line-height:1.85; }
.work-actions { margin-top:30px; display:flex; flex-wrap:wrap; gap:14px; }
.cross-sell { margin-top:26px; font-size:13px; color:var(--muted); }
.cross-sell a { color:var(--ink-bright); border-bottom:1px solid var(--line-strong); padding-bottom:2px; }
.work-nav { display:flex; justify-content:space-between; margin-top:60px; padding-top:24px; border-top:1px solid var(--line); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.work-nav a:hover { color:var(--ink-bright); }
@media (min-width:820px) {
  .work-detail .wrap { display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:start; }
  .work-info { margin-top:0; position:sticky; top:90px; }
}

/* ---------- Editions ---------- */
.edition-price { font-size:13px; color:var(--ink-bright); letter-spacing:.05em; }
.badge-note { display:inline-block; margin-top:10px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--dot-reserved); }

/* ---------- Footer ---------- */
.site-footer {
  margin-top:auto; padding:40px 24px; text-align:center;
  border-top:1px solid var(--line); font-size:11px; letter-spacing:.18em; color:#5f5e59;
}
.site-footer a { color:var(--muted); }
.site-footer .foot-word { font-family:var(--display); font-weight:600; letter-spacing:.3em; color:var(--muted); font-size:13px; }
.site-footer .foot-links { margin-top:14px; display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.site-footer .foot-fine { margin-top:18px; color:#4f4e4a; font-size:10px; letter-spacing:.16em; }

/* ---------- Legal / prose ---------- */
.prose { max-width:720px; margin:0 auto; text-align:left; }
.prose h2 { font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-bright); margin-top:40px; }
.prose p, .prose li { color:#bdbbb4; line-height:1.85; font-size:15px; margin-top:12px; }
.prose ul { margin-top:12px; padding-left:20px; }
.prose a { color:var(--ink); border-bottom:1px solid var(--line-strong); }
.prose .ph { color:var(--dot-reserved); }
.prose .meta { color:var(--muted); font-size:12px; letter-spacing:.04em; }

/* placeholder flag */
.placeholder-banner {
  background:rgba(202,164,90,.12); border-bottom:1px solid rgba(202,164,90,.3);
  color:var(--dot-reserved); text-align:center; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; padding:8px 16px;
}


/* CLS reserve (header/footer injected by JS) */
#site-header{min-height:57px;display:block}
#site-footer{min-height:120px;display:block}

/* Works filter */
.works-filter{display:flex;gap:26px;justify-content:center;margin:6px 0 4px}
.works-filter button{background:none;border:0;color:var(--muted);font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:6px 2px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.works-filter button.active,.works-filter button:hover{color:var(--ink-bright);border-bottom-color:var(--ink-bright)}

/* work-detail: prev/next nav under image, balances columns */
.work-detail .work-images .work-nav{margin-top:28px}

/* work-detail thumbnails (in-situ + macro) */
.work-detail .work-thumbs{display:flex;gap:12px;margin-top:16px}
.work-detail .work-thumbs .thumb{width:74px;height:74px;padding:0;border:1px solid var(--line);background:none;cursor:pointer;overflow:hidden;flex:0 0 auto;transition:border-color .2s}
.work-detail .work-thumbs .thumb img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.work-detail .work-thumbs .thumb.active,.work-detail .work-thumbs .thumb:hover{border-color:var(--ink-bright)}