:root{
  --atelier-ink:#1a1228;
  --atelier-parchment:#f5ecd9;
  --atelier-parchment-2:#e8dcbf;
  --atelier-sepia:#6b4a2b;
  --atelier-gold:#c7972a;
  --atelier-rune:#7c3aed;
  --atelier-rune-2:#38bdf8;
  --atelier-rose:#e84393;
  --p5-crimson:#e61a1a;
  --p5-crimson-d:#a81010;
  --p5-bone:#fff8f3;
  --p5-ink:#0b0516;
  --p5-halftone:radial-gradient(circle at 50% 50%, rgba(11,5,22,.32) 0 1px, transparent 1.4px);
  --atelier-ease:cubic-bezier(.22,1,.36,1);
  --atelier-spring:cubic-bezier(.34,1.56,.64,1);
}

[data-witch-frame]{
  position:relative;
  isolation:isolate;
}
[data-witch-frame]::before,
[data-witch-frame]::after{
  content:"";
  position:absolute;
  width:clamp(72px,9vw,128px);
  aspect-ratio:1;
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:contain;
  z-index:2;
  opacity:.92;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' fill='none' stroke='%23c7972a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M2 64 C 6 32, 32 6, 64 2'/><path d='M14 64 C 18 38, 38 18, 64 14'/><path d='M26 64 C 28 46, 46 28, 64 26'/><circle cx='14' cy='14' r='3.4' fill='%23c7972a'/><circle cx='34' cy='10' r='1.6' fill='%23c7972a'/><circle cx='10' cy='34' r='1.6' fill='%23c7972a'/><path d='M50 14 q 8 -10 22 -6' /><path d='M14 50 q -10 8 -6 22' /><path d='M22 22 q 18 -8 38 8' stroke='%23e84393' opacity='.55'/><path d='M28 30 l 6 -2 l 1 5 l -5 2 z' fill='%23e84393' opacity='.7' stroke='none'/><path d='M42 18 l 5 1 l -1 4 l -4 -1 z' fill='%237c3aed' opacity='.65' stroke='none'/></svg>");
}
[data-witch-frame]::before{top:-14px;left:-14px;}
[data-witch-frame]::after{
  bottom:-14px;right:-14px;
  transform:scale(-1,-1);
}
[data-witch-frame][data-witch-frame~="dense"]::before,
[data-witch-frame][data-witch-frame~="dense"]::after{
  width:clamp(96px,12vw,176px);
  opacity:1;
}

[data-witch-frame][data-witch-frame~="quad"]{
  background-image:
    radial-gradient(circle at 50% 0%, rgba(199,151,42,.06), transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(232,67,147,.05), transparent 60%);
}
[data-witch-frame][data-witch-frame~="quad"] > .witch-corner-tl,
[data-witch-frame][data-witch-frame~="quad"] > .witch-corner-tr,
[data-witch-frame][data-witch-frame~="quad"] > .witch-corner-bl,
[data-witch-frame][data-witch-frame~="quad"] > .witch-corner-br{position:absolute;width:clamp(80px,10vw,148px);aspect-ratio:1;pointer-events:none;z-index:2;background-repeat:no-repeat;background-size:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));}

[data-p5-impact]{
  position:relative;
  display:inline-block;
  font-family:var(--fc,'Barlow Condensed',Impact,sans-serif);
  font-weight:900;
  font-style:italic;
  letter-spacing:.01em;
  color:var(--p5-bone);
  padding:.18em .55em .22em;
  isolation:isolate;
  transform:skewX(-6deg);
  text-rendering:optimizeLegibility;
}
[data-p5-impact]::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--p5-crimson);
  z-index:-2;
  clip-path:polygon(2% 6%,98% 0,100% 92%,0 100%);
  box-shadow:0 6px 0 0 var(--p5-ink), 0 14px 32px rgba(230,26,26,.45);
}
[data-p5-impact]::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--p5-halftone);
  background-size:5px 5px;
  z-index:-1;
  clip-path:polygon(2% 6%,98% 0,100% 92%,0 100%);
  mix-blend-mode:multiply;
  opacity:.55;
}
[data-p5-impact] > span[data-p5-strike]{
  position:relative;
  display:inline-block;
  transform:translateY(-.04em);
}
[data-p5-impact] > span[data-p5-strike]::before{
  content:"";
  position:absolute;
  left:-.08em;right:-.08em;top:48%;height:.16em;
  background:var(--p5-ink);
  transform:rotate(-2deg);
}

[data-p5-ribbon]{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.42em 1.15em .48em;
  font-family:var(--fc,'Barlow Condensed',Impact,sans-serif);
  font-weight:900;
  font-style:italic;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--p5-bone);
  background:var(--p5-crimson);
  clip-path:polygon(0 12%,96% 0,100% 88%,4% 100%);
  isolation:isolate;
  box-shadow:0 10px 28px rgba(230,26,26,.38), inset 0 0 0 2px rgba(0,0,0,.32);
}
[data-p5-ribbon]::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--p5-halftone);
  background-size:6px 6px;
  opacity:.4;
  mix-blend-mode:multiply;
  clip-path:inherit;
  z-index:-1;
}
[data-p5-ribbon]::before{
  content:"";
  position:absolute;
  left:8%;right:8%;top:50%;height:2px;
  background:rgba(255,248,243,.8);
  transform:translateY(-.5px);
  z-index:0;
}

[data-atelier-card]{
  position:relative;
  background:linear-gradient(180deg, rgba(245,236,217,.97), rgba(232,220,191,.95));
  color:var(--atelier-ink);
  border:1px solid rgba(107,74,43,.22);
  border-radius:14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -22px 28px -28px rgba(107,74,43,.6) inset,
    0 22px 60px -28px rgba(11,5,22,.6);
  overflow:hidden;
  isolation:isolate;
}
[data-atelier-card]::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(rgba(107,74,43,.07) 1px, transparent 1.4px),
    radial-gradient(rgba(107,74,43,.05) 1px, transparent 1.4px);
  background-size:3px 3px, 7px 7px;
  background-position:0 0, 1px 1px;
  pointer-events:none;
  opacity:.7;
  z-index:0;
  mix-blend-mode:multiply;
}
[data-atelier-card]::after{
  content:"";
  position:absolute;
  inset:6px;
  border:1px dashed rgba(107,74,43,.28);
  border-radius:10px;
  pointer-events:none;
  z-index:0;
}
[data-atelier-card] > *{position:relative;z-index:1;}
[data-atelier-card][data-seal]{padding-right:64px;}
[data-atelier-card][data-seal]::after{inset:6px 70px 6px 6px;}
[data-atelier-card] [data-atelier-seal]{
  position:absolute;
  top:14px;right:14px;
  width:54px;height:54px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #e84393, #a81010 65%, #5a0d0d 100%);
  box-shadow:0 6px 14px rgba(168,16,16,.4), inset 0 -4px 8px rgba(0,0,0,.32), inset 0 2px 2px rgba(255,255,255,.18);
  display:grid;place-items:center;
  font-family:var(--fc,'Barlow Condensed',Impact,sans-serif);
  font-weight:900;
  font-style:italic;
  letter-spacing:.05em;
  color:#fff8f3;
  font-size:.78rem;
  text-transform:uppercase;
  z-index:2;
  transform:rotate(-7deg);
}
[data-atelier-card] [data-atelier-seal]::before{
  content:"";
  position:absolute;
  inset:4px;
  border:1px dashed rgba(255,248,243,.55);
  border-radius:50%;
}

[data-atelier-sigil]{
  position:relative;
}
[data-atelier-sigil] > svg.atelier-sigil-svg{
  position:absolute;
  top:10px;left:10px;
  width:56px;height:56px;
  pointer-events:none;
  z-index:3;
  color:var(--atelier-gold);
  opacity:.85;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));
}
[data-atelier-sigil][data-atelier-sigil~="corner-tr"] > svg.atelier-sigil-svg{left:auto;right:10px;top:10px;}
[data-atelier-sigil][data-atelier-sigil~="corner-br"] > svg.atelier-sigil-svg{left:auto;right:10px;top:auto;bottom:10px;}
[data-atelier-sigil][data-atelier-sigil~="corner-bl"] > svg.atelier-sigil-svg{top:auto;bottom:10px;}
[data-atelier-sigil][data-atelier-sigil~="lg"] > svg.atelier-sigil-svg{width:88px;height:88px;}

@media (prefers-reduced-motion: no-preference){
  [data-atelier-reveal] svg.atelier-sigil-svg [data-sigil-stroke]{
    stroke-dasharray:var(--sigil-len,420);
    stroke-dashoffset:var(--sigil-len,420);
    transition:stroke-dashoffset 1.6s var(--atelier-ease);
  }
  [data-atelier-reveal].is-revealed svg.atelier-sigil-svg [data-sigil-stroke]{
    stroke-dashoffset:0;
  }
  [data-p5-impact]{transition:transform .35s var(--atelier-spring);}
  [data-p5-impact]:hover{transform:skewX(-6deg) translateY(-2px) scale(1.015);}
  [data-p5-ribbon]{transition:transform .25s var(--atelier-spring), box-shadow .25s var(--atelier-ease);}
  [data-p5-ribbon]:hover{transform:translateY(-2px) rotate(-.4deg); box-shadow:0 14px 34px rgba(230,26,26,.5), inset 0 0 0 2px rgba(0,0,0,.36);}
  [data-atelier-card]{transition:transform .35s var(--atelier-ease), box-shadow .35s var(--atelier-ease), border-color .35s var(--atelier-ease);}
  [data-atelier-card]:hover{transform:translateY(-4px); border-color:rgba(199,151,42,.6); box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 -22px 28px -28px rgba(107,74,43,.7) inset, 0 30px 80px -28px rgba(11,5,22,.7);}
}

@media (prefers-reduced-motion: reduce){
  [data-atelier-reveal] svg.atelier-sigil-svg [data-sigil-stroke]{stroke-dashoffset:0;}
}

[data-theme="light"] [data-witch-frame]::before,
[data-theme="light"] [data-witch-frame]::after{
  filter:drop-shadow(0 1px 3px rgba(107,74,43,.35));
  opacity:1;
}
[data-theme="light"] [data-atelier-card]{
  background:linear-gradient(180deg, #fffaf0, #f3e7c8);
  border-color:rgba(107,74,43,.35);
  color:#26201a;
}
[data-theme="light"] [data-p5-impact]{
  color:var(--p5-bone);
}

.atelier-divider{
  --c:rgba(199,151,42,.5);
  display:flex;align-items:center;gap:14px;
  margin:48px auto;max-width:560px;
  color:var(--atelier-gold);
  font-family:var(--fd,'Playfair Display',serif);
  font-style:italic;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-size:.78rem;
  opacity:.85;
}
.atelier-divider::before,
.atelier-divider::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg, transparent, var(--c), transparent);
}
.atelier-divider svg{width:24px;height:24px;color:var(--atelier-gold);}

@supports (background:paint(squircle)){
  [data-atelier-card]{border-radius:18px;}
}

@media (max-width: 768px){
  [data-witch-frame]::before,
  [data-witch-frame]::after{width:clamp(56px,16vw,96px);}
  [data-p5-impact]{padding:.18em .42em .22em;}
  [data-p5-ribbon]{padding:.38em .85em .42em; letter-spacing:.12em;}
  [data-atelier-card] [data-atelier-seal]{width:44px;height:44px;font-size:.65rem;}
}

@media print{
  [data-witch-frame]::before,
  [data-witch-frame]::after,
  [data-p5-impact]::after,
  [data-p5-ribbon]::after,
  [data-atelier-card]::before{display:none;}
  [data-p5-impact]{color:#000;background:transparent;}
  [data-p5-ribbon]{color:#000;background:transparent;clip-path:none;border:1px solid #000;}
}