:root{
  --paper:#F7F2E5;--paper2:#EEE6D0;--card:#FFFDF6;--ink:#15205A;--ink2:#3B4680;--text:#1E2444;--muted:#535a7c;
  --yellow:#FFD83D;--yellow-soft:#FFF0A6;--red:#D9432B;--line:#15205A;
  --f-display:"Zilla Slab",Georgia,serif;--f-body:"Public Sans",system-ui,sans-serif;--f-hand:"Caveat","Comic Sans MS",cursive;--f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --shadow:4px 4px 0 var(--ink);
  --tint:#FFD83D;
}
.c-folder-chaos{--tint:#FFD83D}
.c-findability-and-search{--tint:#BFD3F2}
.c-sharing-photos-safely{--tint:#F6C4B8}
.c-image-management-basics{--tint:#CDE5C8}
.c-team-workflows{--tint:#E3D3F0}
.c-file-formats-and-downloads{--tint:#FBD9A0}
*,*::before,*::after{box-sizing:border-box;border-radius:0!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper) url(/assets/pattern-grid.svg);color:var(--text);font:400 17px/1.65 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--ink);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{background:var(--yellow-soft)}
h1,h2,h3{font-family:var(--f-display);color:var(--ink);line-height:1.12;margin:0;font-weight:700;text-wrap:balance}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.hand{font-family:var(--f-hand);font-weight:700;letter-spacing:.01em}
.skip{position:absolute;left:-999px;top:0;background:var(--yellow);padding:8px 12px;z-index:99}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.tape{position:absolute;top:-12px;left:50%;width:84px;height:24px;margin-left:-42px;background:url(/assets/tape.svg) center/100% 100% no-repeat;transform:rotate(-3deg);z-index:3}
.hl{background:linear-gradient(transparent 58%,var(--yellow) 58%,var(--yellow) 92%,transparent 92%);padding:0 .08em}

/* masthead */
.mast{background:var(--card);border-bottom:2px solid var(--ink);position:relative}
.mast-row{display:flex;align-items:center;gap:16px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand:hover{background:none}
.brand img{display:block;flex:none}
.brand-t{font:700 24px/1 var(--f-display);white-space:nowrap}
.brand-t mark{background:var(--yellow);padding:0 4px;transform:rotate(-2deg);display:inline-block;color:var(--ink)}
.mast-note{display:none;margin:0 0 0 auto;font:700 21px/1 var(--f-hand);color:var(--ink2)}
.mast-about{margin-left:auto;font-weight:700;font-size:15px;text-decoration:none;border:2px solid var(--ink);padding:5px 12px;background:var(--card)}
.mast-about:hover{background:var(--yellow)}
.tabs{background:var(--paper2);border-bottom:0}
.tabs-row{display:flex;gap:4px;overflow-x:auto;padding-top:10px;scrollbar-width:none;align-items:flex-end}
.tabs-row::-webkit-scrollbar{display:none}
.tab{flex:none;background:var(--tint);border:2px solid var(--ink);border-bottom:0;padding:7px 14px 6px;font:600 14.5px/1.2 var(--f-body);text-decoration:none;color:var(--ink);position:relative;top:0;clip-path:polygon(0 100%,0 10px,8px 0,calc(100% - 8px) 0,100% 10px,100% 100%)}
.tab:hover{background:var(--tint);padding-top:11px}
.tab.is-on{background:var(--paper);padding-top:11px;margin-bottom:-2px;padding-bottom:8px;font-weight:700}
.tabs-row.inline{padding-top:0;overflow:visible;flex-wrap:wrap;gap:8px}
.tabs-row.inline .tab{border-bottom:2px solid var(--ink);clip-path:none;box-shadow:3px 3px 0 var(--ink)}
.tabs-row.inline .tab:hover{padding-top:7px;transform:translate(-1px,-1px)}

/* buttons */
.btn{display:inline-block;background:var(--yellow);border:2px solid var(--ink);box-shadow:var(--shadow);padding:11px 20px;font:700 16px/1.2 var(--f-body);color:var(--ink);text-decoration:none;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);background:var(--yellow)}
.btn-ghost{background:var(--card)}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

/* hero */
.desk{padding:44px 0 56px;border-bottom:2px solid var(--ink);background:linear-gradient(180deg,rgba(255,255,255,0),rgba(238,230,208,.6))}
.desk-grid{display:grid;gap:40px;grid-template-columns:minmax(0,1fr)}
.kicker{font-size:26px;line-height:1.1;color:var(--ink2);margin:0 0 10px;transform:rotate(-1deg);display:inline-block}
.desk h1{font-size:clamp(38px,5.2vw,54px);font-weight:700;letter-spacing:-.01em}
.lede{font-size:19px;max-width:34em;margin:20px 0 0}
.aside{font-size:22px;color:var(--muted);margin:22px 0 0;transform:rotate(-1deg)}
.collage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:26px;min-height:0}
.half{position:relative;border:2px solid var(--ink);background:var(--card);box-shadow:var(--shadow);padding:16px}
.half .lbl{position:absolute;top:-16px;left:14px;background:var(--yellow);border:2px solid var(--ink);padding:0 10px;font-size:20px;line-height:1.3}
.mess{height:380px;background:var(--paper2);transform:rotate(-1deg)}
.mess .list{position:absolute;left:14px;top:26px;font:400 12.5px/1.75 var(--f-mono);color:var(--text);background:var(--card);border:1.5px solid var(--ink);padding:8px 12px;transform:rotate(1.5deg);z-index:1}
.mess .list p{margin:0}
.mess .list .x{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}
.mess .list .q{color:var(--red)}
.ph-frame{position:absolute;background:#fff;border:1.5px solid var(--ink);padding:7px 7px 22px;box-shadow:3px 3px 0 rgba(21,32,90,.25)}
.ph-frame .ph,.ph-frame>img{display:block;width:100%;height:100%}
.ph-frame>img{position:absolute;inset:7px 7px 22px 7px;width:calc(100% - 14px);height:calc(100% - 29px);object-fit:cover}
.mess .p1{width:150px;height:130px;right:20px;top:24px;transform:rotate(5deg)}
.mess .p2{width:122px;height:112px;right:130px;bottom:30px;transform:rotate(-7deg)}
.mess .p3{width:122px;height:112px;right:20px;bottom:8px;transform:rotate(3deg);opacity:.95}
.sticky{position:absolute;background:var(--yellow);padding:12px 12px 14px;font-size:22px;line-height:1.05;box-shadow:3px 4px 0 rgba(21,32,90,.3);z-index:2}
.s1{left:16px;bottom:54px;width:126px;transform:rotate(-5deg)}
.s2{left:150px;bottom:10px;width:120px;background:#F6C4B8;transform:rotate(3deg);font-size:19px}
.scrib{position:absolute;left:14px;top:190px;width:140px;z-index:2}
.arrow{display:none}
.tidy .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tidy .grid .ph{width:100%;height:auto;aspect-ratio:3/2;display:block;border:1.5px solid var(--ink)}
.chips{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chips li{border:1.5px solid var(--ink);background:var(--yellow-soft);padding:2px 9px;font:500 12.5px/1.6 var(--f-mono)}
.chips b{font-weight:500;background:var(--ink);color:#fff;padding:0 4px;margin-right:2px}
.tidy{transform:rotate(1deg);padding-top:22px}

/* sections */
.sec{padding:60px 0}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:30px}
.sec-head h2{font-size:clamp(28px,4.5vw,40px)}
.sec-head .hand{font-size:23px;color:var(--ink2);margin:0}
.fgrid{display:grid;gap:34px 26px;grid-template-columns:1fr}
.folder{display:block;position:relative;text-decoration:none;color:var(--text);margin-top:26px;transition:transform .15s}
.folder:hover{background:none;transform:rotate(0) translateY(-3px)!important}
.folder:nth-child(odd){transform:rotate(-1deg)}.folder:nth-child(even){transform:rotate(1deg)}
.ftab{position:absolute;top:-26px;left:0;background:var(--tint);border:2px solid var(--ink);border-bottom:0;padding:3px 14px 2px;font:500 12.5px/1.6 var(--f-mono);clip-path:polygon(0 100%,0 8px,8px 0,calc(100% - 8px) 0,100% 8px,100% 100%)}
.fbody{display:block;background:var(--tint);border:2px solid var(--ink);box-shadow:var(--shadow);padding:14px 14px 20px}
.fbody strong{display:block;font:700 23px/1.15 var(--f-display);color:var(--ink);margin:12px 0 6px}
.fdesc{display:block;font-size:15px;line-height:1.5;color:var(--text)}
.fimg{display:block;position:relative;aspect-ratio:3/2;background:#fff;border:1.5px solid var(--ink);overflow:hidden}
.fimg .ph{display:block;width:100%;height:100%}
.fimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fresh{background:var(--paper2);border-block:2px solid var(--ink)}
.fresh-grid{display:grid;gap:34px}
.lead-card{position:relative;background:var(--card);border:2px solid var(--ink);box-shadow:var(--shadow);padding:30px 24px 22px;transform:rotate(-1deg);align-self:start}
.lead-card h3{font-size:clamp(26px,3.6vw,34px);margin:10px 0 12px}
.lead-card h3 a{text-decoration:none}
.lead-card p{margin:0 0 10px}
.meta,.imeta{font:400 13px/1.4 var(--f-mono);color:var(--muted)}
.pill{display:inline-block;margin:0;background:var(--tint);border:1.5px solid var(--ink);padding:1px 10px;font:700 12.5px/1.6 var(--f-body);text-transform:uppercase;letter-spacing:.05em}
.pill a{text-decoration:none}
.ledger{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.ledger li{border-bottom:1.5px dashed var(--ink2)}
.ledger a{display:grid;grid-template-columns:38px 1fr;gap:2px 12px;padding:13px 6px;text-decoration:none;align-items:baseline}
.ledger a:hover{background:var(--yellow-soft)}
.ledger .no{font:700 22px/1 var(--f-hand);color:var(--red)}
.ledger .tt{font:600 18px/1.3 var(--f-display);color:var(--ink)}
.ledger .cat{grid-column:2;font:400 12px/1.4 var(--f-mono);color:var(--muted)}
.step-row{display:grid;gap:26px}
.step{position:relative;background:var(--card);border:2px solid var(--ink);box-shadow:var(--shadow);padding:22px 20px 22px}
.step:nth-child(1){transform:rotate(-1deg);background:var(--yellow-soft)}.step:nth-child(2){transform:rotate(.8deg)}.step:nth-child(3){transform:rotate(-.6deg);background:#DCEBD8}
.step .num{position:absolute;top:-22px;left:16px;width:46px;height:46px;background:var(--ink);color:#fff;font-size:34px;line-height:44px;text-align:center}
.step h3{font-size:24px;margin:12px 0 6px}
.step p{margin:0}
.vs-grid{display:grid;gap:26px}
.vs-a,.vs-b{border:2px solid var(--ink);padding:22px 22px 14px;background:var(--card)}
.vs-b{background:var(--yellow-soft);box-shadow:var(--shadow)}
.vs-h{font:700 22px/1.2 var(--f-display);margin:0 0 10px;color:var(--ink)}
.vs ul{margin:0;padding-left:1.2em}.vs li{margin:0 0 8px}
.vs-foot{margin:26px 0 0;font-weight:700}

/* category page */
.chead{background:var(--tint);border-bottom:2px solid var(--ink);padding:26px 0 54px;position:relative}
.chead-grid{display:grid;gap:34px}
.crumb{font:400 13px/1.4 var(--f-mono);margin-bottom:18px}
.crumb a{text-decoration:none;border-bottom:1.5px solid var(--ink)}
.crumb span{margin:0 8px;color:var(--ink2)}
.folder-tab{display:inline-block;background:var(--card);border:2px solid var(--ink);padding:2px 12px;font:500 13px/1.6 var(--f-mono);margin:0 0 14px}
.chead h1{font-size:clamp(36px,6.5vw,62px);max-width:14em}
.sticky-lede{background:var(--card);border:2px solid var(--ink);box-shadow:var(--shadow);padding:16px 18px;margin:24px 0 0;max-width:34em;font-size:18px;transform:rotate(-.6deg)}
.chead-art{position:relative;min-height:240px}
.ph-frame.big{position:relative;width:min(100%,420px);height:auto;aspect-ratio:3/2.2;transform:rotate(2.5deg);padding:10px 10px 30px;margin:0 auto}
.ph-frame.big>img{inset:10px 10px 30px 10px;width:calc(100% - 20px);height:calc(100% - 40px)}
.stamp{position:absolute;right:6%;bottom:-6px;font-size:40px;color:var(--red);border:3px solid var(--red);padding:0 14px;transform:rotate(-8deg);line-height:1.2;background:rgba(255,253,246,.6)}
.cl-grid{display:grid;gap:40px}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.icard a{display:grid;grid-template-columns:auto 1fr auto;gap:14px;background:var(--card);border:2px solid var(--ink);box-shadow:var(--shadow);padding:18px 16px;text-decoration:none;color:var(--text);transition:transform .12s,box-shadow .12s}
.icard:nth-child(odd) a{transform:rotate(-.5deg)}.icard:nth-child(even) a{transform:rotate(.5deg)}
.icard a:hover{background:var(--card);transform:translate(2px,2px) rotate(0);box-shadow:2px 2px 0 var(--ink)}
.inum{font:700 34px/1 var(--f-hand);color:var(--red);min-width:34px}
.ibody{display:flex;flex-direction:column;gap:6px}
.ititle{font:700 21px/1.25 var(--f-display);color:var(--ink)}
.iex{font-size:15px;line-height:1.5;color:var(--muted)}
.go{font:700 26px/1 var(--f-body);color:var(--ink);align-self:center}
.side{align-self:start;border:2px dashed var(--ink);background:var(--card);padding:20px}
.side-h{font:700 20px/1.2 var(--f-display);margin:0 0 12px;color:var(--ink)}
.side ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.side li a{display:block;padding:7px 12px;background:var(--tint);border:1.5px solid var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.side li a:hover{transform:translateX(3px)}
.side-note{font-size:22px;line-height:1.15;margin:16px 0 0;color:var(--ink2)}

/* article */
.art-head{background:var(--card);border-bottom:2px solid var(--ink);padding:26px 0 34px;position:relative}
.art-head::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:10px;background:repeating-linear-gradient(90deg,var(--tint) 0 22px,transparent 22px 30px);border-bottom:2px solid var(--ink)}
.art-head h1{font-size:clamp(30px,5.2vw,50px);max-width:19em;margin-top:16px}
.wrap.art-grid{display:grid;gap:26px;padding-top:54px;padding-bottom:30px;grid-template-columns:minmax(0,1fr)}
.margin{order:2}
.mnote{border-left:3px solid var(--red);padding:2px 0 2px 14px;font-size:14px}
.mnote p{margin:0 0 10px}
.m-h{font:500 11.5px/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 2px!important}
.m-scrawl{font-size:23px;line-height:1.1;color:var(--ink2);transform:rotate(-2deg);margin:16px 0}
.mnav ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:5px}
.mnav a{display:block;font-size:13.5px;line-height:1.3;padding:4px 8px;border-left:8px solid var(--tint);text-decoration:none;background:var(--card)}
.mnav a.on{font-weight:700;background:var(--yellow-soft)}
.art-main{min-width:0;order:1}
.tldr{position:relative;background:var(--yellow);border:2px solid var(--ink);box-shadow:var(--shadow);padding:22px 22px 18px;margin:0 0 40px;transform:rotate(-.6deg)}
.tldr p{margin:0;font-size:17px;line-height:1.55}
.tldr .tldr-h{font-size:26px;line-height:1;margin:0 0 8px;color:var(--ink)}
.prose{counter-reset:sec;font-size:18px;line-height:1.72;max-width:44em}
.prose>*:first-child{margin-top:0}
.prose p,.prose ul,.prose ol{margin:0 0 1.15em}
.prose>p:first-of-type{font-size:20px;line-height:1.65}
.prose h2{font-size:clamp(25px,3.6vw,33px);margin:2.1em 0 .55em;position:relative;counter-increment:sec;padding-bottom:10px;background:url(/assets/scribble.svg) left bottom/220px 10px no-repeat}
.prose h3{font-size:22px;margin:1.6em 0 .4em;color:var(--ink2)}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{margin-bottom:.45em}
.prose li::marker{color:var(--red);font-weight:700}
.prose strong{background:linear-gradient(transparent 62%,var(--yellow-soft) 62%)}
.prose a{font-weight:500}
.prose blockquote{position:relative;margin:1.8em 0 1.8em;background:var(--yellow-soft);border:2px solid var(--ink);padding:20px 22px 6px;transform:rotate(-.8deg);box-shadow:3px 4px 0 rgba(21,32,90,.3)}
.prose blockquote::before{content:"";position:absolute;top:-11px;left:50%;width:70px;height:22px;margin-left:-35px;background:url(/assets/tape.svg) center/100% 100% no-repeat}
.prose blockquote p{font:600 22px/1.3 var(--f-display);color:var(--ink)}
.prose table{border-collapse:collapse;width:100%;margin:1.6em 0;font-size:15.5px;line-height:1.45;background:var(--card);display:block;overflow-x:auto;border:2px solid var(--ink);box-shadow:var(--shadow)}
.prose th{background:var(--ink);color:#fff;text-align:left;padding:10px 12px;font:600 14px/1.3 var(--f-body);white-space:nowrap}
.prose td{padding:10px 12px;border-top:1.5px solid rgba(21,32,90,.25);vertical-align:top;min-width:110px}
.prose tr:nth-child(even) td{background:rgba(255,240,166,.35)}
.prose code{font:500 .86em var(--f-mono);background:var(--paper2);padding:1px 5px}
.prose hr{border:0;height:10px;background:url(/assets/scribble.svg) center/260px 10px no-repeat;margin:2em 0}
.faq{margin-top:56px;max-width:44em}
.faq h2{font-size:clamp(25px,3.6vw,33px);margin-bottom:22px}
.qa{background:var(--card);border:2px solid var(--ink);padding:18px 20px 6px;margin-bottom:16px;position:relative;border-left:10px solid var(--tint)}
.qa h3{font:700 20px/1.3 var(--f-display);margin:0 0 8px}
.qa p{margin:0 0 12px;font-size:16.5px}
.related{background:var(--paper2);border-top:2px solid var(--ink);margin-top:30px}
.rgrid{display:grid;gap:20px}
.rcard{display:flex;flex-direction:column;gap:8px;background:var(--card);border:2px solid var(--ink);box-shadow:var(--shadow);padding:18px;text-decoration:none;color:var(--ink)}
.rcard:nth-child(odd){transform:rotate(-.8deg)}.rcard:nth-child(even){transform:rotate(.8deg)}
.rcard:hover{background:var(--yellow-soft);transform:rotate(0)}
.rcard strong{font:700 19px/1.25 var(--f-display)}
.rno{font-size:30px;line-height:1;color:var(--red)}
.catnav{padding:40px 0 50px}
.catnav .m-h{margin-bottom:12px!important}

/* about/404 */
.about-grid{display:grid;gap:40px}
.about-body{max-width:40em}
.lost .tldr{max-width:640px;margin-bottom:40px}
.lost h1{font-size:34px;margin-bottom:12px}

/* footer */
.foot{background:var(--ink);color:#E9E6D8;padding:48px 0 40px;border-top:0}
.foot a{color:#fff}.foot a:hover{background:var(--ink2)}
.foot-grid{display:grid;gap:30px}
.foot-brand{display:flex;align-items:center;gap:10px;font:700 22px/1 var(--f-display);color:#fff;margin:0 0 12px}
.foot-note{margin:0 0 12px;max-width:26em;font-size:15px}
.foot .hand{font-size:24px;color:var(--yellow);margin:0}
.foot-h{font:500 12px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);margin:0 0 10px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:15px}

@media(min-width:720px){
  .wrap{padding:0 32px}
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .step-row,.vs-grid{grid-template-columns:repeat(3,1fr)}
  .vs-grid{grid-template-columns:1fr 1fr}
  .rgrid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:2fr 1.4fr 1fr}
  .mast-note{display:block}
  .mast-about{margin-left:0}
  .collage{grid-template-columns:1fr}
  .mess{height:340px}
  .ledger a{grid-template-columns:44px 1fr auto;align-items:baseline}
  .ledger .cat{grid-column:auto}
  .chead-grid{grid-template-columns:1.25fr 1fr;align-items:center}
  .cl-grid{grid-template-columns:1fr 300px}
  .about-grid{grid-template-columns:1fr 280px}
}
@media(min-width:1000px){
  .desk{padding:64px 0 80px}
  .desk-grid{grid-template-columns:.8fr 1.4fr;align-items:center;gap:36px}
  .collage{grid-template-columns:1.25fr 60px 1fr;gap:0;align-items:center}
  .arrow{display:block;width:60px;height:auto;margin:0 -2px}
  .mess{height:470px}
  .mess .p1{width:190px;height:165px;right:14px;top:26px}
  .mess .p2{width:150px;height:135px;right:150px;bottom:40px}
  .mess .p3{width:140px;height:125px;right:10px;bottom:-14px}
  .s1{left:18px;bottom:70px}.s2{left:170px;bottom:-12px}
  .scrib{top:230px}
  .tidy{align-self:center}
  .fgrid{grid-template-columns:repeat(3,1fr)}
  .fresh-grid{grid-template-columns:1fr 1.15fr;align-items:start;gap:56px}
  .rgrid{grid-template-columns:repeat(4,1fr)}
  .wrap.art-grid{grid-template-columns:230px minmax(0,1fr);gap:48px}
  .margin{order:0;position:sticky;top:20px;align-self:start}
  .art-main{order:0}
  .prose h2::before{content:counter(sec,decimal-leading-zero);position:absolute;left:-78px;top:-2px;font:700 38px/1 var(--f-hand);color:var(--red);transform:rotate(-6deg)}
  .faq,.tldr{margin-left:0}
}
@media(min-width:1000px){.art-main{padding-left:0}.prose,.faq,.tldr{max-width:720px}}
@media(max-width:999px){.mess .list{font-size:12px}.margin .mnav{display:none}}
@media(max-width:480px){.mess{height:400px}.brand-t{font-size:20px}.mess .p1{right:10px;width:130px;height:115px}.mess .p2{right:100px}.mess .p3{right:8px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}