/* ============================================================
   On Halsey — composed in the Studio, driven by config.js.
   Small centered card on warm paper, with a floating Redon plate.
   Most visual values are set as CSS variables by main.js from config.
   ============================================================ */

:root{
  --paper:#f2ede3;
  --ink:#1c1a17;
  --faint:#8c8474;
  --wm-size:47px;
  --wm-ls:0.06em;
  --sub-size:11px;
  --swash:44px;
  --gap:3.2rem;
  --serif:"EB Garamond", Garamond, "Times New Roman", serif;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* subtle paper glow, toggled by .glow on body */
body.glow{
  background:radial-gradient(120% 120% at 50% 40%, #f6f1e8 0%, var(--paper) 100%);
}

.leaf{position:relative;width:100%;min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;}

/* ---- the image plate ---- */
.plate{
  position:absolute;left:50%;top:50%;z-index:0;
  width:var(--plate-w,170px);
  transform:translate(calc(-50% + var(--plate-x,0px)), calc(-50% + var(--plate-y,-188px)));
  pointer-events:none;
}
.plate img{display:block;width:100%;height:auto;
  border-radius:var(--plate-radius,14px);
  opacity:var(--plate-opacity,1);
  filter:var(--plate-filter,none);
  box-shadow:0 8px 40px rgba(28,26,23,.14);
}
.plate.front{z-index:2;}

/* ---- the card ---- */
.card{position:relative;z-index:1;text-align:center;padding:2rem;}

.wordmark{
  margin:0;font-weight:400;
  font-family:var(--wm-font, var(--serif));
  font-size:var(--wm-size);
  letter-spacing:var(--wm-ls);
  line-height:1.05;
}
.swash{display:block;margin:1.3rem auto;width:var(--swash);height:1px;background:var(--ink);opacity:.5;}
.sub{margin:0;font-style:italic;font-size:var(--sub-size);color:var(--faint);letter-spacing:.06em;}

/* ---- entry ---- */
.entry{margin-top:var(--gap);}
.ask{
  color:var(--ink);text-decoration:none;font-style:italic;font-size:.95rem;
  border-bottom:1px solid rgba(28,26,23,.3);padding-bottom:2px;cursor:pointer;
  transition:border-color .3s,opacity .3s;
}
.ask:hover{border-color:var(--ink);}
.ask.is-hidden{opacity:0;pointer-events:none;}

.request{margin:0 auto;max-width:20rem;}
.request[hidden]{display:none;}
.request__row{
  display:flex;align-items:stretch;gap:.4rem;
  border-bottom:1px solid rgba(28,26,23,.3);transition:border-color .3s;
}
.request__row:focus-within{border-color:var(--ink);}
.request__input{
  flex:1;min-width:0;background:transparent;border:0;
  font-family:var(--serif);font-style:italic;font-size:1rem;
  color:var(--ink);padding:.5rem .1rem;text-align:center;
}
.request__input::placeholder{color:var(--faint);}
.request__input:focus{outline:none;}
.request__submit{
  flex:0 0 auto;background:transparent;border:0;color:var(--faint);
  font-size:1.15rem;line-height:1;padding:0 .3rem;cursor:pointer;transition:color .2s,transform .2s;
}
.request__submit:hover{color:var(--ink);transform:translateX(2px);}

.request__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.request__note{margin:.9rem 0 0;min-height:1.2em;font-size:.85rem;font-style:italic;color:var(--faint);}
.request__note[data-tone="warn"]{color:#b06a3a;}
.request__note[data-tone="done"]{color:var(--ink);font-style:normal;}

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