:root{
  --bg:#fffdf8;
  --ink:#1b1b1b;
  --accent:#ff6781;
  --accent-2:#6c5ce7;
  --ring: #ffd166;
  --radius:16px;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --Bommie:#87cbeb;
  --Boogie:#75307F;
  --Chupie:#c2a93a;
  --Djinnie:#3e6dff;
  --Sassie:#f2b3b9;
  --Mothie:#141714;
  --Nessie:#83c057;
  --Shuggie:#ecece7;
  --Tulie:#b889db;
  --Unie: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8f00ff);
  --Wennie:#8c992e;
  --Bassie:#eec451;
  --Gryffie:#e26c30;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";color:var(--ink);background:var(--bg)}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:24px}
.nav{
  position:sticky; top:0; z-index:10;
  background:rgba(255,253,248,.9); backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.nav .inner{display:flex;align-items:center;gap:20px;padding:12px 24px}
.logo{display:flex;align-items:center;gap:12px;font-weight:900;font-size:20px}
.logo .dot{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--ring)}
.nav a{padding:10px 12px;border-radius:999px}
.nav a:hover{background:#fff;box-shadow:var(--shadow)}

.hero{
  background: radial-gradient(circle at 20% 30%, rgba(255,102,153,.25), transparent 40%),
              radial-gradient(circle at 80% 20%, rgba(108,92,231,.18), transparent 40%),
              radial-gradient(circle at 50% 80%, rgba(255,209,102,.25), transparent 35%);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;border:1px solid rgba(0,0,0,.06)}
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;padding:12px 18px;border-radius:12px;font-weight:800;box-shadow:var(--shadow)}
.cta:hover{transform:translateY(-1px)}
.grid{display:grid;gap:18px}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;background:#fff;border-radius:999px;border:1px dashed rgba(0,0,0,.15);box-shadow:var(--shadow)}
.tag{padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.06);font-size:12px}

.card .img{aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:linear-gradient(135deg, #f8f8f8, #eaeaea);display:flex;align-items:center;justify-content:center}
.card .img img{width:100%;height:100%;object-fit:contain}

.footer{padding:40px 24px;border-top:1px solid rgba(0,0,0,.06);background:#fff}
.marquee{display:flex;gap:18px;overflow:auto;padding:8px}
.pill{padding:10px 14px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.08);white-space:nowrap;box-shadow:var(--shadow)}

.book-card .img{aspect-ratio: 4/5}
.char-chip{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.08)}
.char-chip .swatch{width:14px;height:14px;border-radius:50%}
.char-banner{height:8px;border-radius:6px;margin:8px 0}

@media (max-width: 900px){
  .hero .container{grid-template-columns:1fr}
}


.accordion{margin-top:10px;border-top:1px dashed rgba(0,0,0,.15)}
.accordion .row{border-bottom:1px dashed rgba(0,0,0,.12)}
.accordion button{
  width:100%;background:transparent;border:0;text-align:left;
  padding:14px 6px; font-weight:800; display:flex; align-items:center; justify-content:space-between;
}
.accordion button .chev{transition:transform .2s ease}
.accordion button[aria-expanded="true"] .chev{transform:rotate(90deg)}
.accordion .panel{padding:0 6px 14px 6px}
.kawaii{font-size:14px; opacity:.9; background:#fff; border:1px solid rgba(0,0,0,.06); padding:10px 12px; border-radius:12px; box-shadow: var(--shadow)}
.profile-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-top:10px}
.profile-grid .tile{background:#fff;border:1px solid rgba(0,0,0,.06); padding:10px; border-radius:12px}
.smallcaps{font-variant:all-small-caps; letter-spacing:.04em; opacity:.7}


.logo img{height:28px; width:auto; display:block}
@media (min-width: 900px){ .logo img{height:32px} }


/* ---- Split logo (icon + type) - alignment fix ---- */
.logo {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}
.logo-icon,
.logo-type {
  display: inline-block;
  width: auto;
}
.logo-icon { height: 28px; }
.logo-type { height: 22px; }
@media (min-width: 900px){
  .logo-type { height: 24px; }
}
@media (max-width: 480px){
  .logo-icon { height: 24px; }
  .logo-type { height: 20px; }
}



/* ---- Split logo hard fix (Safari/iPad safe) ---- */
.nav .inner .logo {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}
.nav .inner .logo > img {
  flex: 0 0 auto !important;
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
}
.nav .inner .logo > .logo-icon { height: 28px !important; }
.nav .inner .logo > .logo-type { height: 22px !important; }
@media (min-width: 900px){
  .nav .inner .logo > .logo-type { height: 24px !important; }
}
@media (max-width: 480px){
  .nav .inner .logo > .logo-icon { height: 24px !important; }
  .nav .inner .logo > .logo-type { height: 20px !important; }
}



/* ---- Split logo iPad fix (no wrap, shrink-safe) ---- */
.nav .inner{
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}
.nav .inner .logo{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}
.nav .inner .logo > img{
  display: inline-block !important;
  vertical-align: middle !important;
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  max-width: 100% !important;
}
.nav .inner .logo > .logo-icon{ height: 26px !important; }  /* a touch smaller to avoid wrap */
.nav .inner .logo > .logo-type{ height: 22px !important; }

/* On narrow touch screens (iPad portrait / phones), shrink a bit more */
@media (hover: none) and (pointer: coarse){
  .nav .inner .logo > .logo-icon{ height: 24px !important; }
  .nav .inner .logo > .logo-type{ height: 20px !important; }
}

/* Extra guard for older iPad Safari */
@supports (-webkit-touch-callout: none){
  .nav .inner .logo{ white-space: nowrap !important; }
  .nav .inner .logo > .logo-type{ height: 20px !important; }
}



/* ---- Stacked header: logo above, menu below ---- */
.nav .inner.stacked{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
/* Larger, readable logo when stacked */
.nav .inner.stacked .logo .logo-icon{ height:40px; }
.nav .inner.stacked .logo .logo-type{ height:32px; }
@media (max-width: 600px){
  .nav .inner.stacked .logo .logo-icon{ height:34px; }
  .nav .inner.stacked .logo .logo-type{ height:26px; }
}
/* Menu row under logo */
.nav .inner.stacked .menu{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
}
/* Keep link pills looking good */
.nav .inner.stacked .menu a{ padding:10px 12px; border-radius:999px; }


/* --- iPad logo inline fix (strong specificity) --- */
.nav .inner.stacked .logo{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  flex-shrink:0 !important;
  min-width:0 !important;
}
.nav .inner.stacked .logo > img{
  display:inline-block !important;
  vertical-align:middle !important;
  flex:0 0 auto !important;
  width:auto !important;
  margin:0 !important;
}
/* explicit heights so they scale together */
.nav .inner.stacked .logo > .logo-icon{ height:34px !important; }
.nav .inner.stacked .logo > .logo-type{ height:26px !important; }
/* iPad/phones: reduce slightly to avoid wrap */
@media (hover: none) and (pointer: coarse){
  .nav .inner.stacked .logo > .logo-icon{ height:32px !important; }
  .nav .inner.stacked .logo > .logo-type{ height:24px !important; }
}
/* guard for common iPad widths */
@media (max-width: 834px){
  .nav .inner.stacked .logo > .logo-icon{ height:30px !important; }
  .nav .inner.stacked .logo > .logo-type{ height:22px !important; }
}



/* Runic overlay in hero background */
.hero { position: relative; }
.hero .runes-overlay{
  position:absolute; inset:0;
  background-image:url('assets/textures/runic-hero.svg');
  background-repeat:repeat;
  background-size:1200px auto;
  opacity:.02;
  pointer-events:none;
  z-index:1;
}
.hero > .container, .hero .container{ position:relative; z-index:2; }



/* --- Linear rainbow hero background --- */
.hero{
  background-image: linear-gradient(to right,
      rgb(120,190,32),
      rgb(255,199,44),
      rgb(255,103,31),
      rgb(200,16,46),
      rgb(173,26,172),
      rgb(0,163,224));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* --- merged from styles-reskin.css --- */

/* CryptiCrew RESKIN — inspired by rainbow threads + opposing runic motifs */
:root{
  --bg:#fffdf7;
  --ink:#111115;
  --accent:#ff5fa2;            /* punchy pink */
  --accent-2:#6a5cff;          /* electric indigo */
  --ring:#ffd54a;              /* golden halo */
  --radius:18px;
  --shadow: 0 10px 28px rgba(0,0,0,.10);
  /* Character brand colors (unchanged) */
  --Bommie:#87cbeb; --Boogie:#75307F; --Chupie:#c2a93a; --Djinnie:#3e6dff; --Sassie:#f2b3b9;
  --Mothie:#141714; --Nessie:#83c057; --Shuggie:#ecece7; --Tulie:#b889db; --Unie:linear-gradient(45deg,#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#4b0082,#8f00ff);
  --Wennie:#8c992e; --Bassie:#eec451; --Gryffie:#e26c30;
}

html,body{margin:0;padding:0;font-family: ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:var(--ink); background:var(--bg)}
a{color:inherit;text-decoration:none}
.container{max-width:1240px;margin:0 auto;padding:28px}

/* NAV — pilly with threadlike underline */
.nav{
  position:sticky; top:0; z-index:10;
  background: rgba(255,253,247,.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.nav .inner{display:flex;align-items:center;gap:20px;padding:12px 24px}
.logo img{height:30px;width:auto;display:block}
.nav a{padding:10px 14px;border-radius:999px; position:relative}
.nav a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background: linear-gradient(90deg,#ff5fa2,#6a5cff,#ffd54a);
  opacity:0; transform:scaleX(.6); transform-origin:left; transition:.2s ease;
}
.nav a:hover::after{opacity:1; transform:scaleX(1)}

/* HERO — woven rainbow threads + runic overlay */
.hero{
  --rainbow: conic-gradient(from 210deg at 30% 20%, #ff4d4d, #ff9a3b, #ffd43b, #4cd964, #34aadc, #7d4cff, #b44dff, #ff4d4d);
  background:
    radial-gradient(1200px 480px at 10% 0%, rgba(255,95,162,.25), transparent 60%),
    radial-gradient(900px 500px at 100% 20%, rgba(106,92,255,.18), transparent 60%),
    radial-gradient(600px 400px at 40% 100%, rgba(255,213,74,.25), transparent 60%),
    var(--rainbow);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.92));
  border-bottom: 1px solid rgba(0,0,0,.06);
  position:relative;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJyB2aWV3Qm94PScwIDAgMTYwIDE2MCc+CiAgPGRlZnM+CiAgICA8ZyBpZD0ncic+CiAgICAgIDxwYXRoIGQ9J004IDhoMTJ2NEgxMnY4SDh6JyBmaWxsPSdjdXJyZW50Q29sb3InIG9wYWNpdHk9Jy4xMCcvPgogICAgICA8cGF0aCBkPSdNMjQgMTJsMTAgMCAwIDQgLTYgMCAwIDYgLTQgMHonIGZpbGw9J2N1cnJlbnRDb2xvcicgb3BhY2l0eT0nLjEwJy8+CiAgICAgIDxwYXRoIGQ9J000NiA4aDR2MTJoLTR6JyBmaWxsPSdjdXJyZW50Q29sb3InIG9wYWNpdHk9Jy4xMCcvPgogICAgICA8cGF0aCBkPSdNNjAgOGw4IDggLTggOCAtMyAtMyA1IC01IC01IC01eicgZmlsbD0nY3VycmVudENvbG9yJyBvcGFjaXR5PScuMTAnLz4KICAgICAgPHBhdGggZD0nTTc2IDEyaDEwdjRINzZ6JyBmaWxsPSdjdXJyZW50Q29sb3InIG9wYWNpdHk9Jy4xMCcvPgogICAgICA8cGF0aCBkPSdNOTYgOGg0djhoNnY0aC0xMHonIGZpbGw9J2N1cnJlbnRDb2xvcicgb3BhY2l0eT0nLjEwJy8+CiAgICAgIDxwYXRoIGQ9J00xMTYgOGgxMnY0aC04djhoLTR6JyBmaWxsPSdjdXJyZW50Q29sb3InIG9wYWNpdHk9Jy4xMCcvPgogICAgPC9nPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSdyZycgeDE9JzAnIHkxPScwJyB4Mj0nMScgeTI9JzEnPgogICAgICA8c3RvcCBvZmZzZXQ9JzAlJyBzdG9wLWNvbG9yPScjZmY0ZDRkJy8+CiAgICAgIDxzdG9wIG9mZnNldD0nMTYlJyBzdG9wLWNvbG9yPScjZmY5YTNiJy8+CiAgICAgIDxzdG9wIG9mZnNldD0nMzMlJyBzdG9wLWNvbG9yPScjZmZkNDNiJy8+CiAgICAgIDxzdG9wIG9mZnNldD0nNTAlJyBzdG9wLWNvbG9yPScjNGNkOTY0Jy8+CiAgICAgIDxzdG9wIG9mZnNldD0nNjYlJyBzdG9wLWNvbG9yPScjMzRhYWRjJy8+CiAgICAgIDxzdG9wIG9mZnNldD0nODMlJyBzdG9wLWNvbG9yPScjN2Q0Y2ZmJy8+CiAgICAgIDxzdG9wIG9mZnNldD0nMTAwJScgc3RvcC1jb2xvcj0nI2I0NGRmZicvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsbD0ndXJsKCNyZyknIG9wYWNpdHk9Jy4wOCcvPgogIDxnIHN0cm9rZT0nbm9uZScgZmlsbD0nIzAwMCc+CiAgICA8dXNlIGhyZWY9JyNyJyB4PScwJyB5PScwJy8+CiAgICA8dXNlIGhyZWY9JyNyJyB4PSc4MCcgeT0nMCcvPgogICAgPHVzZSBocmVmPScjcicgeD0nMCcgeT0nODAnLz4KICAgIDx1c2UgaHJlZj0nI3InIHg9JzgwJyB5PSc4MCcvPgogIDwvZz4KPC9zdmc+')' opacity='.06'/>  <g stroke='none' fill='#000'>    <use href='#r' x='0' y='0'/>    <use href='#r' x='80' y='0'/>    <use href='#r' x='0' y='80'/>    <use href='#r' x='80' y='80'/>  </g></svg>');
  background-size: 160px 160px;
  color:#000; mix-blend-mode:multiply; opacity:.35;
}
.hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}

.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;border:1px solid rgba(0,0,0,.06)}
.cta{
  display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;
  padding:12px 18px;border-radius:14px;font-weight:800;box-shadow:var(--shadow); transition: transform .12s ease;
}
.cta.alt{background:var(--accent-2)}
.cta:hover{transform:translateY(-1px)}

.grid{display:grid;gap:18px}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;background:#fff;border-radius:999px;border:1px dashed rgba(0,0,0,.16);box-shadow:var(--shadow)}
.tag{padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.06);font-size:12px}

.card .img{aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:linear-gradient(135deg, #f8f8f8, #ececec);display:flex;align-items:center;justify-content:center}
.card .img img{width:100%;height:100%;object-fit:contain}

.footer{padding:42px 24px;border-top:1px solid rgba(0,0,0,.06);background:#fff}
.marquee{display:flex;gap:18px;overflow:auto;padding:8px}
.pill{padding:10px 14px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.08);white-space:nowrap;box-shadow:var(--shadow)}

/* BOOK CARDS */
.book-card .img{aspect-ratio:4/5}
.char-chip{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.08)}
.char-chip .swatch{width:14px;height:14px;border-radius:50%}
.char-banner{height:10px;border-radius:8px;margin:8px 0}

/* Accordion overrides preserved from base */
.accordion{margin-top:10px;border-top:1px dashed rgba(0,0,0,.15)}
.accordion .row{border-bottom:1px dashed rgba(0,0,0,.12)}
.accordion button{
  width:100%;background:transparent;border:0;text-align:left;
  padding:14px 6px; font-weight:800; display:flex; align-items:center; justify-content:space-between;
}
.accordion button .chev{transition:transform .2s ease}
.accordion button[aria-expanded="true"] .chev{transform:rotate(90deg)}
.accordion .panel{padding:0 6px 14px 6px}
.kawaii{font-size:14px; opacity:.9; background:#fff; border:1px solid rgba(0,0,0,.06); padding:10px 12px; border-radius:12px; box-shadow: var(--shadow)}
.profile-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-top:10px}
.profile-grid .tile{background:#fff;border:1px solid rgba(0,0,0,.06); padding:10px; border-radius:12px}
.smallcaps{font-variant:all-small-caps; letter-spacing:.04em; opacity:.7}

@media (max-width: 900px){
  .hero .container{grid-template-columns:1fr}
}

/* Debug helper: add 'debug-runes' to <body> to see overlay at full strength */
body.debug-runes .hero::before{opacity:.9; mix-blend-mode:normal}


/* ---- Split logo (icon + type) - alignment fix ---- */
.logo {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}
.logo-icon,
.logo-type {
  display: inline-block;
  width: auto;
}
.logo-icon { height: 28px; }
.logo-type { height: 22px; }
@media (min-width: 900px){
  .logo-type { height: 24px; }
}
@media (max-width: 480px){
  .logo-icon { height: 24px; }
  .logo-type { height: 20px; }
}



/* ---- Split logo hard fix (Safari/iPad safe) ---- */
.nav .inner .logo {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}
.nav .inner .logo > img {
  flex: 0 0 auto !important;
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
}
.nav .inner .logo > .logo-icon { height: 28px !important; }
.nav .inner .logo > .logo-type { height: 22px !important; }
@media (min-width: 900px){
  .nav .inner .logo > .logo-type { height: 24px !important; }
}
@media (max-width: 480px){
  .nav .inner .logo > .logo-icon { height: 24px !important; }
  .nav .inner .logo > .logo-type { height: 20px !important; }
}



/* ---- Split logo iPad fix (no wrap, shrink-safe) ---- */
.nav .inner{
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}
.nav .inner .logo{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}
.nav .inner .logo > img{
  display: inline-block !important;
  vertical-align: middle !important;
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  max-width: 100% !important;
}
.nav .inner .logo > .logo-icon{ height: 26px !important; }  /* a touch smaller to avoid wrap */
.nav .inner .logo > .logo-type{ height: 22px !important; }

/* On narrow touch screens (iPad portrait / phones), shrink a bit more */
@media (hover: none) and (pointer: coarse){
  .nav .inner .logo > .logo-icon{ height: 24px !important; }
  .nav .inner .logo > .logo-type{ height: 20px !important; }
}

/* Extra guard for older iPad Safari */
@supports (-webkit-touch-callout: none){
  .nav .inner .logo{ white-space: nowrap !important; }
  .nav .inner .logo > .logo-type{ height: 20px !important; }
}



/* ---- Stacked header: logo above, menu below ---- */
.nav .inner.stacked{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
/* Larger, readable logo when stacked */
.nav .inner.stacked .logo .logo-icon{ height:40px; }
.nav .inner.stacked .logo .logo-type{ height:32px; }
@media (max-width: 600px){
  .nav .inner.stacked .logo .logo-icon{ height:34px; }
  .nav .inner.stacked .logo .logo-type{ height:26px; }
}
/* Menu row under logo */
.nav .inner.stacked .menu{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
}
/* Keep link pills looking good */
.nav .inner.stacked .menu a{ padding:10px 12px; border-radius:999px; }


/* --- iPad logo inline fix (strong specificity) --- */
.nav .inner.stacked .logo{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  flex-shrink:0 !important;
  min-width:0 !important;
}
.nav .inner.stacked .logo > img{
  display:inline-block !important;
  vertical-align:middle !important;
  flex:0 0 auto !important;
  width:auto !important;
  margin:0 !important;
}
/* explicit heights so they scale together */
.nav .inner.stacked .logo > .logo-icon{ height:34px !important; }
.nav .inner.stacked .logo > .logo-type{ height:26px !important; }
/* iPad/phones: reduce slightly to avoid wrap */
@media (hover: none) and (pointer: coarse){
  .nav .inner.stacked .logo > .logo-icon{ height:32px !important; }
  .nav .inner.stacked .logo > .logo-type{ height:24px !important; }
}
/* guard for common iPad widths */
@media (max-width: 834px){
  .nav .inner.stacked .logo > .logo-icon{ height:30px !important; }
  .nav .inner.stacked .logo > .logo-type{ height:22px !important; }
}



/* Runic overlay in hero background */
.hero { position: relative; }
.hero .runes-overlay{
  position:absolute; inset:0;
  background-image:url('assets/textures/runic-hero.svg');
  background-repeat:repeat;
  background-size:1200px auto;
  opacity:.02;
  pointer-events:none;
  z-index:1;
}
.hero > .container, .hero .container{ position:relative; z-index:2; }



/* --- Linear rainbow hero background --- */
.hero{
  background-image: linear-gradient(to right,
      rgb(120,190,32),
      rgb(255,199,44),
      rgb(255,103,31),
      rgb(200,16,46),
      rgb(173,26,172),
      rgb(0,163,224));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}



/* helper: unified split logo row */
.logo-inline{
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  white-space:nowrap;
  gap:8px;
}





/* --- Holographic foil effect for book cards --- */
.book-card .img { position: relative; overflow: hidden; }

/* keep the image below the overlays */
.book-card .img > img, 
.book-card .img picture, 
.book-card .img picture img {
  position: relative;
  z-index: 1;
  display:block;
  width:100%; height:100%; object-fit:contain;
}

/* iridescent sweep */
.book-card .img::before{
  content:"";
  position:absolute; inset:-20%;
  z-index: 3;                         /* force above the image */
  pointer-events:none;
  /* Safari-friendly animated sheen (no conic, no blend) */
  background:
    linear-gradient(115deg,
      rgba(255,0,128,.28) 0%,
      rgba(255,255,0,.24) 25%,
      rgba(0,255,255,.24) 50%,
      rgba(128,0,255,.24) 75%,
      rgba(255,0,128,.28) 100%);
  opacity:.35;
  transform: rotate(8deg) scale(1.2);
  background-size: 200% 200%;
  animation: foilSheen 5.5s linear infinite;
}

/* sparkles */
.book-card .img::after{
  content:"";
  position:absolute; inset:0;
  z-index: 4;
  pointer-events:none;
  background:
    radial-gradient(1px 1px at 15% 25%, rgba(255,255,255,.55) 0 60%, transparent 61%) 0 0 / 22px 22px,
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.45) 0 60%, transparent 61%) 0 0 / 28px 28px,
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.40) 0 60%, transparent 61%) 0 0 / 26px 26px;
  opacity:.28;
  animation: foilTwinkle 7s ease-in-out infinite;
}

.book-card:hover .img::before,
.book-card:focus-visible .img::before { opacity:.45; }
.book-card:hover .img::after,
.book-card:focus-visible .img::after  { opacity:.36; }

@keyframes foilSheen{
  0%   { background-position: 0% 50%; filter:hue-rotate(0deg)   saturate(1.2) contrast(1.05); }
  50%  { background-position: 100% 50%; filter:hue-rotate(90deg) saturate(1.3) contrast(1.1); }
  100% { background-position: 0% 50%; filter:hue-rotate(180deg)  saturate(1.2) contrast(1.05); }
}
@keyframes foilTwinkle{
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.25); }
}

/* Reduced motion: keep a static sheen */
@media (prefers-reduced-motion: reduce){
  .book-card .img::before, .book-card .img::after { animation: none; }
}