/* ============================================================
   Grimley Feendish — site styles
   Palette drawn from the original artwork:
   brick-red devil hoody, ink-black Feendish, cream design sheets,
   Oddtown purple skies and blue-grass / mitten blue.
   © Mandragora Productions Ltd. All Rights Reserved.
   ============================================================ */

:root{
  --ink:#1a1714;          /* Feendish black */
  --brick:#b5462f;        /* Abigail's hoody */
  --brick-deep:#933421;
  --cream:#f3ead6;        /* design-sheet parchment */
  --paper:#fbf8f1;        /* off white */
  --purple:#6b4a86;       /* Oddtown sky */
  --purple-soft:#8a6bab;
  --blue:#6fa8c7;         /* blue grass / mittens */
  --muted:#6c6258;
  --line:#e4dccb;
  --shadow:0 14px 40px rgba(26,23,20,.16);
  --radius:18px;
  --maxw:1100px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  overflow-x:hidden;
}

/* ---------- typography ---------- */
h1,h2,h3{font-family:'Fredoka',sans-serif;font-weight:600;line-height:1.1;margin:0 0 .4em;}
h1{font-size:clamp(2.4rem,6vw,4.6rem);letter-spacing:-.5px;}
h2{font-size:clamp(1.7rem,3.5vw,2.6rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1.1em;}
a{color:var(--brick);text-decoration:none;}
a:hover{text-decoration:underline;}
.accent{font-family:'Caveat',cursive;color:var(--brick);}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.7rem clamp(1rem,4vw,2.4rem);
  background:rgba(251,248,241,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.6rem;font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.15rem;color:var(--ink);}
.brand .g{color:var(--muted);letter-spacing:2px;}
.brand .f{font-family:'Caveat',cursive;color:var(--ink);font-size:1.7rem;font-weight:700;}
.brand .dot{color:var(--brick);}
.navlinks{display:flex;gap:.3rem;flex-wrap:wrap;}
.navlinks a{
  color:var(--ink);padding:.4rem .8rem;border-radius:999px;font-weight:700;font-size:.95rem;
}
.navlinks a:hover{background:var(--cream);text-decoration:none;}
.navlinks a.active{background:var(--brick);color:#fff;}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(2.2rem,6vw,4.5rem) clamp(1.1rem,4vw,2rem);position:relative;z-index:2;}
.section{position:relative;}
.lead{font-size:1.2rem;color:var(--muted);max-width:62ch;}
.tag{display:inline-block;background:var(--purple);color:#fff;font-weight:800;font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;padding:.34rem .8rem;border-radius:999px;margin-bottom:1rem;}
.tag.blue{background:var(--blue);}
.tag.brick{background:var(--brick);}

/* ---------- parallax background layers ---------- */
.parallax{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.player{
  position:absolute;left:50%;width:min(1300px,135vw);
  transform:translateX(-50%);
  opacity:.10;
  filter:saturate(.9);
  will-change:transform;
}
.player img{width:100%;display:block;}
.player.a{top:6vh;}
.player.b{top:120vh;opacity:.09;}
.player.c{top:240vh;opacity:.10;}
.player.d{top:360vh;opacity:.09;}
/* soft wash so content stays readable over art */
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,rgba(251,248,241,.55),rgba(251,248,241,.82));}

/* ---------- hero / splash ---------- */
.hero{position:relative;z-index:2;text-align:center;padding:clamp(2rem,6vw,4rem) 1rem 1rem;}
.hero .splashframe{
  max-width:980px;margin:1.4rem auto 0;border-radius:var(--radius);overflow:hidden;
  background:#fff;box-shadow:var(--shadow);border:1px solid var(--line);
}
.hero .splashframe img{width:100%;display:block;}
.hero .wordmark{font-family:'Caveat',cursive;font-size:clamp(3rem,9vw,6rem);font-weight:700;color:var(--ink);margin:0;}
.hero .wordmark .grim{font-family:'Fredoka',sans-serif;font-weight:400;letter-spacing:.18em;color:var(--muted);font-size:.62em;text-transform:none;}
.hero .horns{color:var(--brick);}
.subtitle{font-family:'Fredoka',sans-serif;font-size:clamp(1rem,2.4vw,1.45rem);color:var(--brick-deep);font-weight:500;margin-top:.2rem;}

/* ---------- buttons ---------- */
.btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem;}
.btn{
  display:inline-block;background:var(--brick);color:#fff;font-family:'Fredoka',sans-serif;font-weight:500;
  padding:.8rem 1.5rem;border-radius:999px;font-size:1.02rem;box-shadow:0 8px 20px rgba(181,70,47,.28);
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);text-decoration:none;box-shadow:0 12px 26px rgba(181,70,47,.34);}
.btn.ghost{background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:none;}
.btn.purple{background:var(--purple);box-shadow:0 8px 20px rgba(107,74,134,.28);}

/* ---------- cards ---------- */
.card{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(1.4rem,3vw,2.4rem);}
.grid{display:grid;gap:1.4rem;}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}

.chip-img{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);}
.chip-img img{width:100%;display:block;}

.charcard h3{color:var(--brick-deep);margin-bottom:.2rem;}
.charcard .role{font-family:'Caveat',cursive;font-size:1.3rem;color:var(--purple);margin-bottom:.5rem;}

/* pull quote */
.quote{font-family:'Caveat',cursive;font-size:clamp(1.5rem,3.4vw,2.3rem);color:var(--brick);line-height:1.3;border-left:5px solid var(--brick);padding-left:1.2rem;margin:1.6rem 0;}

/* ---------- document reader ---------- */
.doc-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.6rem 0 1.2rem;}
.doc-tabs button{
  font-family:'Fredoka',sans-serif;font-weight:500;font-size:.98rem;cursor:pointer;
  border:2px solid var(--ink);background:#fff;color:var(--ink);padding:.55rem 1.1rem;border-radius:999px;
}
.doc-tabs button.active{background:var(--ink);color:#fff;}
.reader{
  background:#d9d2c4;border-radius:var(--radius);padding:clamp(.7rem,2vw,1.6rem);
  max-height:78vh;overflow-y:auto;box-shadow:inset 0 2px 14px rgba(0,0,0,.18);
  -webkit-user-select:none;user-select:none;
}
.reader .pagewrap{position:relative;max-width:820px;margin:0 auto 1.1rem;}
.reader img{
  width:100%;display:block;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.22);
  pointer-events:none;-webkit-user-drag:none;user-drag:none;
}
.reader .wm{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:clamp(1rem,3vw,1.8rem);
  color:rgba(181,70,47,.10);transform:rotate(-24deg);letter-spacing:2px;
  pointer-events:none;text-align:center;
}
.doc-note{display:none;}
.doc-note.active{display:block;}

/* ---------- copyright small print ---------- */
.smallprint{font-size:.78rem;color:var(--muted);max-width:80ch;margin-top:1.2rem;line-height:1.5;}
.notice{background:var(--cream);border:1px dashed var(--brick);border-radius:12px;padding:.9rem 1.1rem;font-size:.82rem;color:var(--brick-deep);margin:1.2rem 0;}

/* ---------- studios / contact ---------- */
.studio-row{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:1.4rem;}
.studio{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow);}
.studio .badge{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:.28rem .7rem;border-radius:999px;margin-bottom:.7rem;}
.studio .badge.past{background:var(--muted);color:#fff;}
.studio .badge.current{background:var(--brick);color:#fff;}
.mail{font-family:'Fredoka',sans-serif;font-size:clamp(1.2rem,3vw,1.9rem);color:var(--brick);}

/* ---------- footer ---------- */
.footer{position:relative;z-index:2;background:var(--ink);color:#cfc7ba;margin-top:3rem;}
.footer .wrap{padding-top:2.4rem;padding-bottom:2.4rem;}
.footer a{color:#f0d9d0;}
.footer h3{color:#fff;font-size:1.05rem;}
.footer .fp{font-size:.82rem;line-height:1.6;color:#a59c8f;}
.footer .rule{height:1px;background:rgba(255,255,255,.12);margin:1.4rem 0;}

/* ---------- misc ---------- */
.center{text-align:center;}
.mt{margin-top:1.6rem;}
img{ -webkit-user-drag:none; }