/* Witch of Design · the landing page: a page with seven faults.
   While it is being corrected it is a sheet (white, the colours are marks). Every correction turns its part into a plate.
   When all seven are done the page is a stack of plates, like the Instagram grid. */
:root{--k:#101214;--c:#00A7E1;--m:#E5007E;--y:#FFE600;--display:'IM Fell English',Georgia,serif;--text:'IBM Plex Sans',Arial,sans-serif;--num:'IBM Plex Mono',monospace;--dock:118px;--pad:clamp(16px,5vw,72px);--e:cubic-bezier(.2,0,0,1)}
@media (min-width:760px){:root{--dock:96px}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--k);font-family:var(--text);font-size:18px;line-height:1.45;-webkit-text-size-adjust:100%}
a{color:inherit;text-underline-offset:3px}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--k);outline-offset:3px}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:var(--y);padding:10px 14px;z-index:30}

/* ---------- the poster ---------- */
.poster{position:relative;height:calc(100svh - var(--dock));min-height:440px;display:grid;grid-template-rows:8fr 27fr 15fr 18fr 15fr 17fr;container-type:size;background:#fff;overflow:hidden}
body[data-state="done"] .poster{height:100svh}
.blk{position:relative;display:flex;align-items:center;min-height:0;margin:0;padding:0 var(--pad);border:0;border-radius:0;background:none;color:var(--k);font:inherit;text-align:left;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent;box-shadow:inset 0 -1px 0 #DADADA;transition:color .5s var(--e)}
.blk::before{content:"";position:absolute;inset:0;background:var(--plate);transform:scaleX(0);transform-origin:right center;transition:transform .7s var(--e)}
.blk.fixed{cursor:default}
.blk.fixed::before{transform:none}
.blk > .in{position:relative;z-index:1;display:block;width:100%}
.blk.hint{outline:4px dashed var(--c);outline-offset:-6px}
.poster.noanim .blk,.poster.noanim .blk *,.poster.noanim .blk::before,.poster.noanim .sticker,.poster.noanim .sticker *{transition:none!important}

/* 1 · the name: gaps between the letters */
.b-name{--plate:var(--k)}
.b-name .in{font-family:var(--display);font-size:min(6cqw,5.2cqh,40px);line-height:1;white-space:nowrap}
.b-name i{font-style:italic}
.b-name b{font-weight:400;display:inline-block;transition:margin .7s var(--e)}
.b-name .g1{margin-left:.5em}.b-name .g2{margin-left:-.07em}.b-name .g3{margin-left:.32em}.b-name .g4{margin-left:-.05em}
.b-name.fixed{color:#fff}
.b-name.fixed b{margin-left:0}

/* 2 · the headline: stretched type */
.b-head{--plate:var(--m);--hfs:min(10.4cqw,11cqh)}
.b-head .in{width:66.67%;font-family:var(--display);font-size:calc(var(--hfs) * .66);line-height:.98;letter-spacing:-.01em;transform:scaleX(1.5);transform-origin:left center;transition:font-size .7s var(--e),transform .7s var(--e)}
.b-head.fixed .in{width:100%;font-size:var(--hfs);transform:none}

/* 3 · seven fonts */
.b-fonts{--plate:var(--c)}
.b-fonts .in{font-size:min(5cqw,3.7cqh,34px);line-height:1.25;padding-right:calc(var(--st) + 8px)}
.b-fonts span{display:inline-block;margin-right:.35em}
.b-fonts .w1{font-family:"Comic Sans MS","Chalkboard SE","Comic Neue",cursive}
.b-fonts .w2{font-family:Impact,"Arial Black",sans-serif;font-weight:900}
.b-fonts .w3{font-family:"Brush Script MT","Snell Roundhand",cursive;font-size:1.25em}
.b-fonts .w4{font-family:"Courier New",monospace}
.b-fonts .w5{font-family:Papyrus,Copperplate,fantasy}
.b-fonts .w6{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;text-transform:uppercase;font-size:.8em}
.b-fonts .w7{font-family:"Trebuchet MS",Verdana,sans-serif;letter-spacing:.18em}
.b-fonts span.ok{font-family:var(--display);font-weight:400;font-style:normal;text-transform:none;font-size:1.12em;letter-spacing:0}

/* 4 · pale text */
.b-para{--plate:var(--y);color:#C6C6C6}
.b-para .in{font-size:min(4.7cqw,3.3cqh,30px);line-height:1.28;max-width:30em}
.b-para.fixed{color:var(--k)}

/* 5 · lines too tight */
.b-lines{--plate:var(--y);padding-right:clamp(96px,24cqw,300px)}
.b-lines .in{font-family:var(--display);font-size:min(5.6cqw,3.7cqh,38px);line-height:.74;transition:line-height .7s var(--e)}
.b-lines.fixed .in{line-height:1.22}

/* 6 · five buttons */
.b-btns{--plate:var(--y);padding-right:clamp(96px,24cqw,300px);box-shadow:none}
.b-btns .five{display:flex;flex-wrap:wrap;gap:6px;transition:opacity .35s}
.b-btns .five span{padding:5px 10px;border:1px solid var(--k);font-size:min(3.6cqw,2.6cqh,18px);line-height:1.2;white-space:nowrap}
.b-btns .one{position:absolute;left:0;top:50%;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;transform:translateY(-50%) scale(.9);transform-origin:left center;opacity:0;pointer-events:none;transition:opacity .45s .25s,transform .45s .25s var(--e)}
.b-btns.fixed .five{opacity:0;pointer-events:none}
.b-btns.fixed .one{opacity:1;transform:translateY(-50%);pointer-events:auto}
.cta{display:inline-flex;align-items:center;min-height:clamp(46px,7.4cqh,64px);padding:0 clamp(16px,4cqw,34px);background:var(--k);color:var(--y);font-weight:500;font-size:min(4.6cqw,3.4cqh,24px);text-decoration:none;white-space:nowrap}
.cta:hover{background:#fff;color:var(--k)}
.b-btns .more{font-size:min(4cqw,3cqh,20px);white-space:nowrap}

/* 7 · the sticker: centred by its box, so the word sits too high */
.sticker{--st:min(23cqw,18cqh,190px);position:absolute;z-index:3;right:var(--pad);top:calc(35% - var(--st) / 2);width:var(--st);height:var(--st);border-radius:50%;border:2px solid var(--k);background:#fff;color:var(--k);padding:0;font:inherit;cursor:pointer;display:grid;place-items:center;transition:background .5s,border-color .5s;-webkit-tap-highlight-color:transparent}
.poster{--st:min(23cqw,18cqh,190px)}
.sticker span{font-family:var(--display);font-size:calc(var(--st) * .3);line-height:1;transform:translateY(-34%);transition:transform .7s var(--e)}
.sticker.fixed{background:var(--y);border-color:var(--y);cursor:default}
.sticker.fixed span{transform:translateY(-4%)}

/* ---------- the dock: what to do, and how far you are ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:6;height:var(--dock);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:8px clamp(96px,22vw,300px) 8px var(--pad);background:#fff;border-top:2px solid var(--k);transition:transform .6s var(--e)}
body[data-state="done"] .dock{transform:translateY(110%);visibility:hidden;transition:transform .6s var(--e),visibility 0s .6s}
.dock .row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
.lp-tally{display:flex;gap:4px;flex:none}
.lp-tally i{display:block;width:14px;height:14px;border:1px solid var(--k)}
.cap{font-family:var(--display);font-size:clamp(19px,2.3vw,30px);line-height:1.08}
.tools{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0}
.tools button{background:none;border:0;padding:6px 0;font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;color:var(--k);cursor:pointer}

/* ---------- she, and her measuring ---------- */
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:8;pointer-events:none;overflow:visible}
#fx #w{pointer-events:auto;cursor:pointer}
.meas{position:fixed;z-index:7;pointer-events:none;border:2px dashed var(--c);opacity:0;transition:opacity .25s}
.meas.on{opacity:1}
.meas b{position:absolute;left:6px;top:6px;padding:2px 8px;background:#fff;border:2px solid var(--c);font-family:var(--num);font-weight:400;font-size:13px;line-height:1.4;white-space:nowrap;color:var(--k)}
.meas.ok{border-color:transparent}
.meas.ok b{background:var(--y);border-color:var(--k)}

/* ---------- after the seventh correction ---------- */
.after{display:none}
body[data-state="done"] .after{display:block}
.band{padding:clamp(56px,10vw,128px) var(--pad)}
.band h2{font-family:var(--display);font-weight:400;font-size:clamp(44px,8.4vw,128px);line-height:.94;letter-spacing:-.01em;text-wrap:balance;max-width:11em}
.band .lede{font-size:clamp(19px,2vw,26px);line-height:1.4;max-width:30em;margin-top:clamp(20px,3vw,40px)}
.b-book{background:var(--c)}
.bookgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
@media (max-width:860px){.bookgrid{grid-template-columns:minmax(0,1fr)}}
.bform{display:flex;flex-direction:column;gap:18px;max-width:560px}
.bform legend,.bform label{display:block;font-weight:500;margin-bottom:8px;padding:0}
.bform fieldset{border:0;padding:0;margin:0}
.pick{display:grid;gap:8px}
.pick label{position:relative;display:flex;align-items:center;min-height:54px;margin:0;padding:0 18px;border:2px solid var(--k);font-family:var(--display);font-weight:400;font-size:24px;line-height:1.1;cursor:pointer}
.pick input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pick label:has(input:checked){background:var(--k);color:var(--c)}
.pick label:has(input:focus-visible){outline:3px solid var(--k);outline-offset:3px}
.bform input[type=text],.bform input[type=email],.bform input[type=url],.bform textarea{width:100%;min-height:54px;padding:12px 16px;background:#fff;color:var(--k);border:2px solid var(--k);border-radius:0;font-family:var(--text);font-size:17px}
.bform textarea{min-height:120px;resize:vertical;line-height:1.4}
.btn-k{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 30px;background:var(--k);color:#fff;border:2px solid var(--k);border-radius:0;font-family:var(--text);font-size:19px;font-weight:500;cursor:pointer;text-decoration:none}
.btn-k:hover{background:#fff;color:var(--k)}
.fine{font-size:15px;line-height:1.45;max-width:34em}
.note{min-height:22px;font-size:15px}
.hp{position:absolute;left:-9999px}
.card{background:#fff;border:2px solid var(--k);padding:22px;display:flex;flex-direction:column;gap:12px;max-width:560px}
.card .big{font-family:var(--display);font-size:36px;line-height:1.05}
.b-more{background:#fff}
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,24px);margin-top:clamp(28px,4vw,56px)}
@media (max-width:860px){.doors{grid-template-columns:minmax(0,1fr)}}
.door{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:clamp(200px,26vw,360px);padding:clamp(20px,2.6vw,36px);color:var(--k);text-decoration:none;transition:transform .2s var(--e)}
.door:hover{transform:translateY(-6px)}
.door b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(40px,5vw,76px);line-height:.95}
.door span{font-size:18px;line-height:1.4;max-width:20em}
.door.k{background:var(--k);color:#fff}.door.m{background:var(--m)}.door.y{background:var(--y)}
.b-more .aside{margin-top:clamp(24px,3vw,40px);display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;font-size:18px}
.lp-foot{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;padding:26px var(--pad) 120px;border-top:2px solid var(--k);font-size:15px}
.lp-foot button{background:none;border:0;padding:0;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:var(--k)}
/* wide screens: the headline takes the left, the four small parts stack on the right */
@media (min-width:900px){
  .poster{grid-template-columns:1.25fr 1fr;grid-template-rows:9fr 23fr 23fr 22fr 23fr}
  .b-name{grid-column:1 / -1}
  .b-head{grid-column:1;grid-row:2 / -1;--hfs:min(7.6cqw,17cqh);box-shadow:inset -1px 0 0 #DADADA}
  .b-fonts,.b-para,.b-lines,.b-btns{grid-column:2}
  .b-lines,.b-btns{padding-right:calc(var(--pad) + 120px)}
  .b-fonts .in{font-size:min(2.5cqw,4.6cqh);padding-right:0}
  .b-para .in{font-size:min(1.9cqw,3.6cqh)}
  .b-lines .in{font-size:min(2.6cqw,4.6cqh)}
  .b-btns .five span{font-size:min(1.5cqw,2.8cqh)}
  .cta{font-size:min(1.8cqw,3.4cqh)}
  .b-btns .more{font-size:min(1.5cqw,2.8cqh)}
  .sticker,.poster{--st:min(15cqw,26cqh)}
  .sticker{right:auto;left:calc(55.55% - var(--st) - var(--pad) / 2);top:auto;bottom:7%}
}
@media (prefers-reduced-motion:reduce){.blk,.blk *,.blk::before,.sticker,.sticker *,.dock{transition:none!important}html{scroll-behavior:auto}}