/* ============================================================
   PixelFvck — Bauhaus / constructivist skin
   Primaries + black on cream, condensed caps, sharp corners,
   hard offset hover shadow. Re-skin via the variables below.
   ============================================================ */
:root{
  /* palette 02 · Saekdong — bright red / blue / green on soft white */
  --bg:#ebe9e3; --paper:#f4f3ee; --ink:#1a1a1a;
  --red:#e5322b; --blue:#1f7ae0; --yellow:#16a34a;
  --dim:#666660; --line:#1a1a1a;
  --gap:16px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:"Jost",system-ui,sans-serif;-webkit-font-smoothing:antialiased;padding:clamp(26px,5vw,52px) clamp(16px,4vw,44px) 80px;overflow-x:hidden;}
.wrap{max-width:min(1800px,92vw);margin:0 auto;}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;}

/* masthead */
.masthead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:clamp(46px,6vw,74px);}
.brand{display:flex;align-items:center;gap:12px;}
.ghost{width:34px;height:40px;display:block;flex:none;}
.logo{font-family:"Jost",system-ui,sans-serif;font-weight:700;font-size:clamp(30px,4.6vw,46px);letter-spacing:-.015em;line-height:.92;}

/* creature habitat (ambient, anchored to the content) */
.creatures{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:visible;}
.creatures .cr{position:absolute;left:0;top:0;will-change:transform;}
.creatures .cr svg{display:block;width:100%;height:auto;}
.creatures .slime{position:absolute;width:9px;height:5px;border-radius:50%;background:#bfe0d0;opacity:.55;transition:opacity 3.4s linear;pointer-events:none;}
/* creatures now stay on at every size (they anchor to the cards, which stack on mobile) */

/* creatures living inside the case-study viewer */
.vcreatures{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden;}
.vcreatures .vc{position:absolute;left:0;top:0;will-change:transform;}
.vcreatures .vc svg{display:block;width:100%;height:auto;}
@media(max-width:760px){.vcreatures{display:none;}}

/* grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;grid-auto-flow:dense;gap:var(--gap);}
.tile{position:relative;display:block;aspect-ratio:4/3;border:3px solid var(--ink);background:var(--paper);overflow:hidden;cursor:pointer;text-decoration:none;color:inherit;padding:0;font:inherit;text-align:left;transition:transform .14s ease, box-shadow .14s ease;}
.tile:hover,.tile:focus-visible{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--ink);}
/* the feature tile takes its height from the two rows it spans, so the
   column bottoms line up exactly (an aspect-ratio here lands ~4px short) */
.tile.big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;}

.art{position:absolute;inset:0;}
.art svg{width:100%;height:100%;display:block;}
.art canvas.live{position:absolute;inset:0;width:100%;height:100%;display:block;}

.face{position:absolute;inset:0;pointer-events:none;}
.bar{position:absolute;left:0;right:0;bottom:0;background:var(--paper);color:var(--ink);border-top:1px solid var(--ink);padding:14px 16px 16px;}
.btop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px;}
.btitle{font-family:"Jost",system-ui,sans-serif;font-weight:500;font-size:20px;letter-spacing:0;line-height:1.15;color:var(--ink);}
/* let the feature tile own the page */
.tile.big .btitle{font-size:28px;font-weight:700;letter-spacing:-.01em;}
.tile.big .blurb{font-size:17px;}
.btop .date{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap;flex:none;}
.blurb{margin:0;font-family:"Jost",system-ui,sans-serif;font-size:16px;line-height:1.55;color:var(--ink);opacity:.75;}

/* footer */
.foot{margin-top:32px;border-top:3px solid var(--ink);padding-top:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);}

/* viewer */
.viewer{position:fixed;inset:0;z-index:50;display:flex;opacity:0;transition:opacity .2s ease;}
.viewer[hidden]{display:none;}
.viewer.is-open{opacity:1;}
.viewer-backdrop{position:absolute;inset:0;background:rgba(20,20,20,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.viewer-panel{position:relative;margin:auto;width:min(1180px,95vw);height:min(800px,92vh);background:var(--paper);border:4px solid var(--ink);overflow:hidden;display:flex;flex-direction:column;box-shadow:12px 12px 0 var(--ink);transform:scale(.955) translateY(6px);transition:transform .22s cubic-bezier(.2,.85,.25,1);}
.viewer.is-open .viewer-panel{transform:scale(1) translateY(0);}
@media(prefers-reduced-motion:reduce){.viewer,.viewer-panel{transition:none;}}
.viewer-bar{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:3px solid var(--ink);flex:none;}
.viewer-bar .dot{width:14px;height:14px;background:var(--red);flex:none;}
.viewer-title{flex:1;min-width:0;font-family:"Jost",system-ui,sans-serif;font-weight:700;font-size:20px;letter-spacing:0;line-height:1.2;}
.viewer-date{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap;flex:none;}
.viewer-open,.viewer-close{font-family:"Space Mono",monospace;font-size:12px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);padding:6px 11px;cursor:pointer;text-decoration:none;white-space:nowrap;flex:none;}
.viewer-open{background:var(--red);border-color:var(--red);color:var(--paper);}
.viewer-open:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.viewer-close:hover{background:var(--yellow);color:var(--paper);}
/* the brief keeps its natural height; the embed below absorbs the change */
/* the roomy bottom padding is the ledge the inchworm and the cat stand on */
.viewer-brief{display:flex;flex-direction:column;gap:6px;padding:10px 16px 18px;background:var(--paper);border-bottom:3px solid var(--ink);flex:none;max-height:48%;overflow-y:auto;}
.viewer-brief p{font-family:"Jost",system-ui,sans-serif;font-size:16px;line-height:1.55;color:var(--ink);max-width:68ch;margin:0;}
.viewer-brief #viewer-note,.viewer-brief #viewer-learned{font-family:"Jost",system-ui,sans-serif;font-size:16px;line-height:1.55;color:var(--ink);max-width:68ch;}
.viewer-stage{flex:1 1 auto;min-height:0;background:#fff;position:relative;overflow:hidden;}
.viewer-stage iframe{width:100%;height:100%;border:0;display:block;}

/* Learnings drawer — a slim tab on the right edge; clicking slides a reading
   panel in over the right side while the live experiment stays visible.
   On phones it drops to a bottom sheet. */
.learn-tab{position:absolute;top:50%;right:0;transform:translateY(-50%);z-index:5;
  writing-mode:vertical-rl;text-orientation:mixed;
  font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);background:var(--paper);border:3px solid var(--ink);border-right:0;
  padding:14px 7px;cursor:pointer;box-shadow:-4px 4px 0 rgba(26,26,26,.12);}
.learn-tab:hover{color:var(--paper);background:var(--blue);}
.learn-tab[hidden]{display:none;}
.viewer-stage.drawer-open .learn-tab{display:none;}

.learn-drawer{position:absolute;top:0;right:0;height:100%;width:min(440px,82%);z-index:6;
  background:var(--paper);border-left:3px solid var(--ink);
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .28s cubic-bezier(.2,.85,.25,1);}
.viewer-stage.drawer-open .learn-drawer{transform:translateX(0);box-shadow:-12px 0 24px rgba(26,26,26,.14);}
.learn-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;border-bottom:3px solid var(--ink);flex:none;}
.learn-drawer-title{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);}
.learn-drawer-close{font-family:"Space Mono",monospace;font-size:14px;line-height:1;border:2px solid var(--ink);background:var(--paper);color:var(--ink);padding:4px 9px;cursor:pointer;}
.learn-drawer-close:hover{background:var(--yellow);color:var(--paper);}
#viewer-learned{padding:14px 16px 22px;overflow-y:auto;font-family:"Jost",system-ui,sans-serif;font-size:15px;line-height:1.6;color:var(--ink);}
@media(prefers-reduced-motion:reduce){.learn-drawer{transition:none;}}

/* stage states: loading while the experiment boots, fallback if it never does */
.stage-state{position:absolute;inset:0;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center;}
.stage-state[hidden]{display:none;}
.stage-note{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;max-width:34ch;line-height:1.7;}
.loading-marks{display:flex;gap:12px;align-items:center;}
.loading-marks i{width:16px;height:16px;display:block;animation:mark-beat 1.15s ease-in-out infinite;}
.loading-marks i:nth-child(1){background:var(--red);border-radius:50%;}
.loading-marks i:nth-child(2){background:var(--blue);animation-delay:.16s;}
.loading-marks i:nth-child(3){background:var(--yellow);clip-path:polygon(50% 0,100% 100%,0 100%);animation-delay:.32s;}
@keyframes mark-beat{0%,70%,100%{transform:translateY(0);}35%{transform:translateY(-7px);}}
@media(prefers-reduced-motion:reduce){.loading-marks i{animation:none;}}
.viewer-link .vl-art{width:min(360px,70%);border:3px solid var(--ink);line-height:0;}
.viewer-link .vl-art svg{width:100%;height:auto;display:block;}
.viewer-link .vl-open{font-family:"Jost",system-ui,sans-serif;font-weight:700;letter-spacing:0;font-size:17px;background:var(--red);color:var(--paper);border:3px solid var(--ink);padding:10px 22px;text-decoration:none;box-shadow:5px 5px 0 var(--ink);transition:transform .12s, box-shadow .12s;}
.viewer-link .vl-open:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);}
@media(prefers-reduced-motion:reduce){.viewer-link .vl-open{transition:none;}}

/* responsive */
@media(max-width:860px){
  .grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;}
  .tile.big{grid-column:span 2;grid-row:auto;aspect-ratio:4/3;}
}
@media(max-width:620px){
  /* the bar can't hold title + date + two buttons on one line — let it wrap */
  .viewer-bar{flex-wrap:wrap;gap:8px 10px;}
  .viewer-title{flex:1 1 100%;order:1;font-size:18px;}
  .viewer-bar .dot{order:0;}
  .viewer-date{order:2;margin-right:auto;}
  .viewer-open{order:3;}
  .viewer-close{order:4;}
  .viewer-brief{max-height:40%;}
  /* Learnings becomes a bottom sheet — no room for a side panel on a phone */
  .learn-tab{top:auto;bottom:0;right:0;left:0;transform:none;writing-mode:horizontal-tb;
    width:100%;text-align:center;border:0;border-top:3px solid var(--ink);padding:10px 0;box-shadow:0 -4px 0 rgba(26,26,26,.10);}
  .learn-drawer{top:auto;bottom:0;left:0;right:0;width:100%;height:66%;
    border-left:0;border-top:3px solid var(--ink);box-shadow:0 -10px 0 rgba(26,26,26,.06);
    transform:translateY(100%);}
  .viewer-stage.drawer-open .learn-drawer{transform:translateY(0);}
}
@media(max-width:520px){
  .grid{grid-template-columns:1fr;}
  /* stacked: the caption sits below the art instead of eating it */
  .tile,.tile.big{grid-column:span 1;grid-row:auto;aspect-ratio:auto;}
  .art{position:relative;aspect-ratio:4/3;}
  .face,.bar{position:static;}
}
@media(prefers-reduced-motion:reduce){.tile{transition:none;}}

/* Formatted text in the viewer (Overview + Learnings) — keep paragraphs and
   lists readable when the editor stores real formatting. */
#viewer-note p, #viewer-learned p{ margin:0 0 .7em; }
#viewer-note p:last-child, #viewer-learned p:last-child{ margin-bottom:0; }
#viewer-note ul, #viewer-learned ul,
#viewer-note ol, #viewer-learned ol{ margin:.3em 0 .7em 1.2em; padding:0; }
#viewer-note li, #viewer-learned li{ margin:.15em 0; }
#viewer-note a, #viewer-learned a{ color:var(--blue); }