/* Conjure a Name — styles. Derived from MASTER-ARCHITECTURE.md (Creative mode). */

/* one display webfont + a clean body sans (two families max) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* color tokens */
  --bg:        #F6F5F9;   /* light content ground */
  --surface:   #FFFFFF;   /* cards / panels on light */
  --ink:       #1F1A2B;   /* primary text (plum-tinted near-black) */
  --muted:     #6B6478;   /* secondary text */
  --accent:    #9B1B30;   /* the ONE signature hue: deep garnet */
  --accent-soft:#F3DDE1;  /* garnet tint for fills/hovers */
  --dark:      #1C1326;   /* the conjuring panel */
  --dark-2:    #271A35;   /* one step off dark, for the tool card */
  --on-dark:   #F1ECF4;   /* text on the dark panel */
  --on-dark-muted:#A99FB8;
  /* spacing rhythm (8px) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --radius:14px;
  --shadow:0 1px 2px rgba(28,19,38,.06), 0 8px 24px rgba(28,19,38,.08);
  --maxw:920px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s5)}

/* ---- header / nav -------------------------------------------------------- */
.site-head{background:var(--dark); border-bottom:1px solid rgba(255,255,255,.06)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:var(--s3); padding-top:var(--s4); padding-bottom:var(--s4)}
.brand{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:1.5rem;
  color:var(--on-dark); letter-spacing:.01em}
.brand .spark{color:var(--accent)}
.nav{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4)}
.nav a{color:var(--on-dark-muted); font-size:.95rem; font-weight:500}
.nav a:hover,.nav a[aria-current="page"]{color:var(--on-dark); text-decoration:none}

/* ---- the conjuring panel (dark hero + tool) ------------------------------ */
.conjure-panel{background:var(--dark); color:var(--on-dark);
  padding:var(--s7) 0 var(--s8)}
.conjure-panel h1{font-family:'Cormorant Garamond',serif; font-weight:700;
  font-size:clamp(2.2rem,6vw,3.4rem); line-height:1.05; margin:0 0 var(--s3);
  color:var(--on-dark)}
.lede{color:var(--on-dark-muted); font-size:1.05rem; max-width:46ch; margin:0 0 var(--s6)}

.tool{background:var(--dark-2); border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius); padding:var(--s5); box-shadow:var(--shadow)}
.controls{display:flex; flex-wrap:wrap; gap:var(--s4); align-items:flex-end;
  margin-bottom:var(--s5)}
.field{display:flex; flex-direction:column; gap:var(--s2)}
.field > label{font-size:.78rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--on-dark-muted)}
.toggle{display:flex; gap:var(--s1); background:rgba(0,0,0,.25);
  border-radius:10px; padding:var(--s1)}
.toggle button{appearance:none; border:0; background:transparent; color:var(--on-dark-muted);
  font:inherit; font-size:.95rem; font-weight:500; padding:10px 14px; min-height:44px;
  border-radius:8px; cursor:pointer}
.toggle button.is-active{background:var(--accent); color:#fff}
select{appearance:none; font:inherit; font-size:.95rem; min-height:44px;
  background:rgba(0,0,0,.25); color:var(--on-dark); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:10px 36px 10px 14px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23A99FB8' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center}

.btn-primary{appearance:none; border:0; cursor:pointer; font:inherit; font-weight:600;
  font-size:1.02rem; min-height:48px; padding:12px 26px; border-radius:10px;
  background:var(--accent); color:#fff; box-shadow:0 6px 18px rgba(155,27,48,.35)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{appearance:none; cursor:pointer; font:inherit; font-weight:500;
  min-height:44px; padding:10px 18px; border-radius:10px;
  background:transparent; color:var(--on-dark); border:1px solid rgba(255,255,255,.18)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}

.actions{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s5)}

/* result cards — built to be screenshotted */
.results{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--s4)}
.card{background:linear-gradient(180deg,#fff, #fbf7f8); color:var(--ink);
  border-radius:var(--radius); padding:var(--s5) var(--s5) var(--s4);
  border:1px solid #efe7ea; box-shadow:var(--shadow);
  animation:rise .35s ease both}
@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.card-name{font-family:'Cormorant Garamond',serif; font-weight:700;
  font-size:1.7rem; line-height:1.1; margin:0 0 var(--s2);
  border-bottom:2px solid var(--accent-soft); padding-bottom:var(--s2); display:inline-block}
.card-line{margin:var(--s2) 0 var(--s4); color:var(--muted); font-style:italic;
  font-family:'Cormorant Garamond',serif; font-size:1.12rem; line-height:1.4}
.card-foot{display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid #f1ebed; padding-top:var(--s3)}
.card-mark{font-size:.7rem; letter-spacing:.04em; color:#b9a9af; text-transform:lowercase}
.card-copy{appearance:none; border:1px solid var(--accent-soft); background:#fff;
  color:var(--accent); font:inherit; font-size:.82rem; font-weight:600;
  padding:7px 12px; border-radius:8px; cursor:pointer; min-height:36px}
.card-copy:hover{background:var(--accent-soft)}

/* ---- light content sections --------------------------------------------- */
.content{padding:var(--s8) 0}
.content h2{font-family:'Cormorant Garamond',serif; font-weight:700;
  font-size:1.9rem; margin:var(--s7) 0 var(--s3); line-height:1.12}
.content h2:first-child{margin-top:0}
.content p{margin:0 0 var(--s4); max-width:68ch}
.content ol,.content ul{max-width:68ch; padding-left:1.3em}
.content li{margin-bottom:var(--s2)}
.faq dt{font-weight:600; margin-top:var(--s4)}
.faq dd{margin:var(--s1) 0 0; color:var(--muted); max-width:68ch}
.crosslinks{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s4)}
.crosslinks a{display:inline-block; background:var(--accent-soft); color:var(--accent);
  font-weight:600; padding:10px 16px; border-radius:10px}
.crosslinks a:hover{text-decoration:none; filter:brightness(.97)}
.disclaimer{font-size:.82rem; color:var(--muted); margin-top:var(--s5);
  padding-top:var(--s4); border-top:1px solid #e9e3ec}

/* ---- reserved ad zones (empty until AdSense approval) -------------------- */
.ad-zone{min-height:90px; margin:var(--s6) 0; border:1px dashed #ddd6e0;
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:#c4bccb; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase}

/* ---- footer -------------------------------------------------------------- */
.site-foot{background:var(--dark); color:var(--on-dark-muted); padding:var(--s7) 0;
  margin-top:var(--s7)}
.site-foot .wrap{display:flex; flex-wrap:wrap; gap:var(--s5); justify-content:space-between}
.site-foot a{color:var(--on-dark-muted)}
.site-foot a:hover{color:var(--on-dark)}
.foot-nav{display:flex; flex-wrap:wrap; gap:var(--s4)}
.foot-copy{font-size:.82rem}

/* ---- forms (contact) ----------------------------------------------------- */
.form-field{display:flex; flex-direction:column; gap:var(--s2); margin-bottom:var(--s4); max-width:520px}
.form-field label{font-weight:600; font-size:.9rem}
.form-field input,.form-field textarea{font:inherit; padding:12px 14px; border-radius:10px;
  border:1px solid #ddd6e0; background:#fff; color:var(--ink); min-height:46px}
.form-field textarea{min-height:130px; resize:vertical}

/* ---- toast --------------------------------------------------------------- */
#toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:10px;
  font-size:.9rem; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:50}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---- responsive + motion ------------------------------------------------- */
@media (max-width:560px){
  body{font-size:16px}
  .controls{gap:var(--s3)}
  .field,.toggle{width:100%}
  .toggle{justify-content:space-between}
  .toggle button{flex:1}
  .btn-primary{width:100%}
  .results{grid-template-columns:1fr 1fr}
}
@media (max-width:380px){ .results{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:6px}