/* dark.css · icommittaxfrauds home, dark edition.
   Layout after the founder's reference (15 Oct): a faint grid ground, bracketed frames, a 3D object in the hero,
   numbered bordered cards, an exploded build diagram and a FAQ. Colours and type are the Style Guide's:
   Black ground, Bone text, Stone lines, Highlight once (the main button), Archivo throughout.
   No glows, chrome or colour gradients; the grid is 1px Stone lines. */
.dk{background:var(--black);color:var(--bone)}
.dk ::selection{background:var(--bone);color:var(--black)}
.dk :focus-visible{outline-color:var(--hi)}
.dk .site.light.dark{background:transparent;position:absolute;left:0;right:0;top:0;z-index:10}
.dk main{--line:rgba(106,104,98,.28);
  background-color:var(--black);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:28px 28px;background-position:center top}
.dk .foot-site.v5{background:var(--black);border-top:1px solid var(--stone)}

/* type roles */
.lab{font-family:var(--sans);font-size:12px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase}
.mute{color:rgba(246,244,240,.62)}
.dh{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.02em;line-height:.92}

/* bracket frame: four corner ticks, nothing else */
.brk{position:relative;padding:14px 16px}
.brk::before,.brk::after{content:"";position:absolute;width:10px;height:10px;border:1px solid var(--bone);pointer-events:none}
.brk::before{left:0;top:0;border-right:0;border-bottom:0}
.brk::after{right:0;bottom:0;border-left:0;border-top:0}
.box{border:1px solid var(--stone)}

/* ---------- hero ---------- */
.dh-hero{position:relative;min-height:max(640px,100svh);padding:96px var(--g) 28px;display:grid;
  grid-template-rows:auto 1fr auto auto;gap:18px;max-width:1440px;margin:0 auto}
.dh-sides{display:flex;justify-content:space-between;gap:16px}
.dh-sides .brk{max-width:22ch}
.dh-sides .r{text-align:right}
.dh-stage{display:grid;place-items:center;min-height:300px}
.dh-stage .c3{--w:min(76vw,560px)}
.dh-copy{text-align:center;display:grid;justify-items:center;gap:14px}
.dh-copy h1{font-size:clamp(26px,5.6vw,44px)}
.dh-copy .lede{margin:0;font-size:16px;max-width:none}
.dh-copy .btn{width:auto;min-width:0;padding:12px 28px;min-height:52px;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.dh-base{display:none}
.dh-base .box{display:flex;align-items:center;gap:14px;padding:12px 16px}
.dh-base .ico{width:22px;height:22px;flex:0 0 22px}
@media (min-width:900px){
  .dh-hero{grid-template-rows:1fr auto auto;grid-template-columns:1fr minmax(0,620px) 1fr;align-items:center;column-gap:24px;padding-top:110px}
  .dh-sides{display:contents}
  .dh-sides .l{grid-column:1;grid-row:1;justify-self:start}
  .dh-sides .r{grid-column:3;grid-row:1;justify-self:end}
  .dh-stage{grid-column:2;grid-row:1}
  .dh-copy{grid-column:1/-1;grid-row:2}
  .dh-base{display:flex;justify-content:space-between;grid-column:1/-1;grid-row:3;align-items:end}
  .dh-base .box{max-width:300px}
}

/* ---------- section scaffolding ---------- */
.dsec{max-width:1440px;margin:0 auto;padding:clamp(72px,11vw,128px) var(--g)}
.dsec-head{display:grid;gap:14px;margin-bottom:clamp(28px,5vw,48px)}
.dsec-head h2{font-size:clamp(36px,8vw,72px)}
.dsec-head p{max-width:34ch}
@media (min-width:900px){.dsec-head{grid-template-columns:1fr auto;align-items:end}.dsec-head p{text-align:left}}

/* ---------- details: THE PEEL + the facts list ---------- */
.det{display:grid;gap:16px}
@media (min-width:900px){.det{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.det .pp{position:relative;min-height:320px;background:var(--black)}
.det .pp .hx-media{position:absolute;inset:0;min-height:0;background:transparent}
.det .pp .stage{position:absolute;inset:0;padding:22px 22px 14px;justify-content:center}
@media (min-width:900px){.det .pp{min-height:460px}}
.facts-d{display:grid;align-content:start}
.facts-d>div{display:grid;grid-template-columns:28px 1fr;gap:4px 14px;padding:18px 16px;border-bottom:1px solid var(--stone)}
.facts-d>div:last-child{border-bottom:0}
.facts-d .ico{width:22px;height:22px;grid-row:span 2;margin-top:1px}
.facts-d h3{font-family:var(--sans);font-weight:400;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.facts-d p{font-size:15px;line-height:1.5;color:rgba(246,244,240,.72)}

/* ---------- FILE 001 cards ---------- */
.cards-d{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:640px){.cards-d{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.cards-d{grid-template-columns:1fr 1fr;max-width:980px}}
.cd{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:14px;padding:16px;background:var(--black);transition:border-color .2s}
.cd:hover{border-color:var(--bone)}
.cd-top{display:flex;justify-content:space-between;align-items:center}
.cd-top .plus{width:18px;height:18px;position:relative}
.cd-top .plus::before,.cd-top .plus::after{content:"";position:absolute;background:var(--bone)}
.cd-top .plus::before{left:0;right:0;top:8px;height:2px}
.cd-top .plus::after{top:0;bottom:0;left:8px;width:2px}
.cd h3{font-family:var(--display);font-weight:400;font-size:clamp(20px,4.6vw,26px);text-transform:uppercase;letter-spacing:-.01em;line-height:1}
.cd .line{font-style:italic;font-size:15px;margin-top:6px;color:rgba(246,244,240,.8)}
.cd .tile{aspect-ratio:4/3;background:var(--black);border:1px solid var(--stone)}
.cd .chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.cd .chips span{border:1px solid var(--stone);padding:5px 9px}
.cd .btn{width:auto;min-width:0;min-height:44px;padding:8px 16px;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.cards-more{margin-top:24px}
.cards-more .btn{width:auto;min-width:0;min-height:48px;padding:10px 22px;font-size:13px;letter-spacing:.06em;text-transform:uppercase}

/* ---------- how it's printed: exploded DTF layers ---------- */
.build{display:grid;gap:clamp(32px,6vw,56px);align-items:center}
@media (min-width:900px){.build{grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,4fr)}}
.build h2{font-size:clamp(36px,7.4vw,64px)}
.build .intro{margin-top:18px;max-width:34ch}
.stack{--s:min(72vw,380px);position:relative;width:var(--s);height:calc(var(--s) * 1.15);margin:0 auto;perspective:1400px}
.stack-3d{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-38deg)}
.ly{position:absolute;left:0;top:calc(var(--s) * .12);width:var(--s);height:calc(var(--s) * .78);transform-style:preserve-3d;
  transform:translateZ(calc(var(--i) * var(--gap,46px)))}
.ly .pl{position:absolute;inset:0;border:1px solid var(--stone)}
.ly-shirt .pl{background:var(--black);background-image:repeating-linear-gradient(0deg,rgba(106,104,98,.55) 0 1px,transparent 1px 5px),repeating-linear-gradient(90deg,rgba(106,104,98,.35) 0 1px,transparent 1px 5px)}
.ly-glue .pl{background-color:rgba(246,244,240,.06);background-image:radial-gradient(rgba(246,244,240,.55) 1px,transparent 1.6px);background-size:9px 9px}
.ly-ink .pl{background:transparent;border-color:rgba(246,244,240,.5);display:grid;place-items:center}
.ly-ink .pl span{font-family:var(--display);color:var(--bone);font-size:calc(var(--s) * .1);line-height:.88;text-transform:uppercase;letter-spacing:-.03em;width:70%}
.ly-film .pl{background:rgba(246,244,240,.13);border-color:rgba(246,244,240,.45)}
.ly-film .pl::after{content:"";position:absolute;right:0;top:0;width:18%;aspect-ratio:1;background:rgba(246,244,240,.3);clip-path:polygon(0 0,100% 100%,100% 0)}
.ly .tag{position:absolute;left:-14px;top:-14px;transform:rotateZ(38deg) rotateX(-58deg);transform-origin:left top;
  font-size:11px;letter-spacing:.08em;background:var(--black);border:1px solid var(--stone);padding:2px 6px;white-space:nowrap}
.legs{display:grid;gap:10px}
.legs>div{display:grid;grid-template-columns:34px 1fr;gap:4px 10px;padding:14px 16px;transition:border-color .2s,background-color .2s}
.legs>div.on{border-color:var(--bone)}
.legs .n{grid-row:span 2;color:rgba(246,244,240,.62)}
.legs h3{font-family:var(--sans);font-weight:400;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.legs p{font-size:14px;line-height:1.5;color:rgba(246,244,240,.72)}

/* ---------- need to know ---------- */
.ntk{display:grid;gap:clamp(28px,5vw,48px)}
@media (min-width:900px){.ntk{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.ntk h2{font-size:clamp(36px,8vw,72px)}
.ntk .btn{margin-top:28px;width:auto;min-width:0;padding:12px 26px;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.qa-d details{border-bottom:1px solid var(--stone)}
.qa-d details:first-child{border-top:1px solid var(--stone)}
.qa-d summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:34px 1fr 18px;align-items:center;gap:10px;min-height:64px;padding:14px 4px}
.qa-d summary::-webkit-details-marker{display:none}
.qa-d summary .q{font-family:var(--sans);font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.qa-d .pm{flex:none}
.qa-d details[open] .pm::after{transform:scaleY(0)}
.qa-d .a{padding:0 4px 20px 48px;max-width:62ch;color:rgba(246,244,240,.8)}

/* scramble: the real text stays for screen readers and search */
.scr{position:relative}
.scr .scr-v{display:inline}
@media (prefers-reduced-motion:reduce){.ly{--gap:46px}}
.end-as{font-size:clamp(19px,3.4vw,32px);text-align:right;margin-top:.3em}
.dk .cards-more .btn,.dk .ntk .btn,.dk .dsec-head .btn{display:inline-flex}
@media (min-width:1100px){.cards-d{max-width:none}.cd .tile{aspect-ratio:16/10}}
.stack-3d{transform:rotateX(55deg) rotateZ(-38deg)}
.ly .tag{left:calc(-16px - var(--i) * 2px)}
.det .pp .print{align-self:stretch}
@media (min-width:900px){.det .pp{min-height:420px}}
.dh-copy h1{font-size:clamp(23px,6.4vw,44px)}
.dh-sides .brk{max-width:28ch}
.end-st{display:inline-block;max-width:100%}
.end-btn{display:inline-flex;width:auto;min-width:0;padding:12px 28px;min-height:52px;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.build{overflow:hidden;padding:8px 0}
@media (max-width:899px){.stack{--s:min(60vw,320px);margin:24px auto}}
/* phones: the tilted stack projects further left than its box; pull it back to centre with room to spare */
@media (max-width:899px){.stack{transform:translateX(calc(var(--s) * .17)) scale(.9);transform-origin:50% 50%}}

/* =====================================================================
   Inner pages, dark edition: same ground, type roles and frames as home.
   ===================================================================== */
.dk .page-head,.dk .page-head.light,.dk .page-head.dark{background:transparent;color:var(--bone);padding:clamp(112px,15vw,168px) 0 clamp(36px,6vw,64px)}
.dk .page-head h1,.dk .page-head.light h1{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.02em;line-height:.92;font-size:clamp(40px,9vw,104px)}
.dk .page-head .sub{position:relative;margin-top:24px;max-width:46ch;padding:14px 16px;font-size:16px;color:rgba(246,244,240,.78)}
.dk .page-head .sub::before,.dk .page-head .sub::after{content:"";position:absolute;width:10px;height:10px;border:1px solid var(--bone)}
.dk .page-head .sub::before{left:0;top:0;border-right:0;border-bottom:0}
.dk .page-head .sub::after{right:0;bottom:0;border-left:0;border-top:0}
.dk .page-head .chip,.dk .page-head.light .chip{background:transparent;color:var(--bone);border:1px solid var(--stone);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;margin-top:20px}
.dk .crumbs{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(246,244,240,.62);margin-bottom:18px}
.dk .crumbs a{color:inherit}
.dk .page-head.big .st{font-size:clamp(40px,10vw,112px)}
.dk .page-head.big .as{color:rgba(246,244,240,.8)}
.dk .page-head .micro{color:rgba(246,244,240,.7)}
.dk .page-head + .sec{padding-top:clamp(16px,3vw,32px)}

.dk .sec{background:transparent}
.dk .h2,.dk .h2.st{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.02em;line-height:.94;font-size:clamp(30px,6.4vw,56px)}
.dk .sec-head{margin-bottom:clamp(24px,4vw,40px)}
.dk .measure{max-width:760px}
.dk a{color:inherit}
.dk .links a,.dk .links button{text-transform:uppercase;font-size:13px;letter-spacing:.06em}

/* buttons on black: Ink fills disappear, so they become outlines */
.dk .btn-ink{background:transparent;border-color:var(--bone);color:var(--bone)}
.dk .btn-ink:hover{background:var(--bone);color:var(--black)}
.dk .btn-line{border-color:var(--bone);color:var(--bone)}
.dk .btn-line:hover{background:var(--bone);color:var(--black)}
.dk .btn{font-size:14px;letter-spacing:.06em;text-transform:uppercase}

/* numbered bordered rows: facts on About, Contact */
.dk .facts-block,.dk .idlist{border:1px solid var(--stone);margin-top:20px;counter-reset:row}
.dk .facts-block>div,.dk .idlist>div{counter-increment:row;grid-template-columns:34px 1fr;gap:4px 12px;padding:16px;border-bottom:1px solid var(--stone)}
.dk .facts-block>div:last-child,.dk .idlist>div:last-child{border-bottom:0}
.dk .facts-block>div::before,.dk .idlist>div::before{content:counter(row,decimal-leading-zero);grid-row:span 2;font-size:12px;letter-spacing:.08em;color:rgba(246,244,240,.62);padding-top:2px}
.dk .facts-block dt,.dk .idlist dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(246,244,240,.62)}
.dk .facts-block dd,.dk .idlist dd{font-size:16px}
@media (min-width:640px){.dk .facts-block>div,.dk .idlist>div{grid-template-columns:34px 180px 1fr}.dk .facts-block>div::before,.dk .idlist>div::before{grid-row:auto}}

/* the letter on About: a bracketed note */
.dk .letter{position:relative;border:1px solid var(--stone);padding:clamp(20px,4vw,36px);max-width:46ch;color:var(--bone)}
.dk .letter::before,.dk .letter::after{content:"";position:absolute;width:12px;height:12px;border:1px solid var(--bone)}
.dk .letter::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.dk .letter::after{right:-1px;bottom:-1px;border-left:0;border-top:0}

/* steps on the Shirts page: numbered boxes */
.dk .steps{counter-reset:s;gap:12px}
.dk .steps li{border:1px solid var(--stone);padding:18px 16px;grid-template-columns:40px 1fr}
.dk .steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:rgba(246,244,240,.62);padding-top:4px}
.dk .steps .lead{font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.dk .steps .body{color:rgba(246,244,240,.75);font-size:15px}
@media (min-width:1000px){.dk .steps li{grid-template-columns:1fr}}

/* accordions: Questions page and the Shirts page's quick answers */
.dk .qa{border-top:1px solid var(--stone);counter-reset:q;max-width:none}
.dk .qa details{border-bottom:1px solid var(--stone);counter-increment:q}
.dk .qa summary{display:grid;grid-template-columns:34px 1fr 18px;gap:10px;font-size:15px;letter-spacing:.06em;text-transform:uppercase;padding:16px 4px}
.dk .qa summary::before{content:counter(q,decimal-leading-zero);font-size:12px;color:rgba(246,244,240,.62)}
.dk .qa .a{padding-left:48px;color:rgba(246,244,240,.8)}
.qa-page{max-width:880px}
.qa-page .a p+p{margin-top:10px}
.qa-page details{scroll-margin-top:96px}

/* legal and policy pages: sections as framed blocks */
.dk .prose{max-width:760px;color:rgba(246,244,240,.85)}
.dk .prose>p:first-child{border:1px solid var(--stone);padding:16px;color:var(--bone)}
.dk .prose h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(22px,4.6vw,32px);margin-top:44px;padding-top:18px;border-top:1px solid var(--stone)}
.dk .prose ul{border:1px solid var(--stone);margin-top:16px}
.dk .prose ul li{margin:0;padding:14px 16px 14px 40px;border-bottom:1px solid var(--stone)}
.dk .prose ul li:last-child{border-bottom:0}
.dk .prose ul li::before{left:16px;top:1.35em;width:12px;background:var(--bone)}
.dk .prose p+p{margin-top:14px}
.dk .updated{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(246,244,240,.55)}

/* end band and 404 */
.dk .end,.dk .end.dark{background:transparent;border-top:1px solid var(--stone)}
.dk .end .st{font-size:clamp(40px,9vw,104px)}
.dk .end .micro{color:rgba(246,244,240,.7)}
.dk .notfound .st{font-size:clamp(44px,12vw,140px)}
.dk main.big{padding-top:120px}
.dk .sec-cta .btn,.dk .end .btn{display:inline-flex;width:auto;min-width:0;padding:12px 28px}

/* Shirts page: the converted cards and facts */
.dk .cards-d{margin-top:8px}
.dk .facts-d.gap{margin-top:16px}
@media (min-width:900px){.dk .facts-d.gap{grid-template-columns:repeat(5,1fr)}.dk .facts-d.gap>div{border-bottom:0;border-right:1px solid var(--stone)}.dk .facts-d.gap>div:last-child{border-right:0}}
/* yellow buttons keep Ink text on dark pages */
.dk .btn-hi,.dk .bar-end a{color:var(--ink)}
.dk .btn-hi:hover{background:var(--black);color:var(--hi);border-color:var(--hi)}
.dk .bar-end a:hover{background:transparent;color:var(--hi)}
/* the name is one long word: size it so it never splits */
.dk .page-head h1.long{font-size:clamp(22px,7.2vw,104px);overflow-wrap:normal}
.dk.notfound main{background-color:var(--black)}
/* the 3D folder: same box as the flat card it replaces, so nothing shifts */
.dh-stage{position:relative;min-height:clamp(300px,64vw,440px)}
@media (min-width:900px){.dh-stage{min-height:460px}}
.dh-stage .f3d{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
.dh-stage.held .f3d{cursor:grabbing}
.dh-stage.has-f3d .c3{visibility:hidden}
/* no swap flash: with scripts on, the flat card waits hidden; the folder fades in.
   The card only appears if the 3D can't run (.no3d: reduced motion, Data Saver, no WebGL, failed or slow download). */
.js .dh-stage .c3{visibility:hidden}
.js.no3d .dh-stage .c3{visibility:visible}
.dh-stage .f3d{opacity:0;transition:opacity .6s ease}
.dh-stage.has-f3d .f3d{opacity:1}
/* the folder still: shows instantly, the live 3D crossfades in over it in the same pose.
   Phones that skip 3D (reduced motion, Data Saver, no WebGL) keep the still. Without scripts, the flat card shows. */
.dh-stage .f3d-poster{display:none}
.js .dh-stage .f3d-poster{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .4s ease}
.dh-stage.has-f3d .f3d-poster{opacity:0}
.js.no3d .dh-stage .c3{visibility:hidden}
.dh-stage .f3d{transition:opacity .4s ease}

/* ---------- Menu (phones): a yellow button, and a dark panel in the house style ---------- */
.dk .menu summary{min-height:40px;min-width:0;padding:8px 16px;background:var(--hi);color:var(--ink);border:1px solid var(--hi);
  text-decoration:none;font-size:13px;letter-spacing:.06em;text-transform:uppercase;justify-content:center}
.dk .menu[open] summary{background:transparent;color:var(--hi)}
.dk .menu summary:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.dk .menu ul{position:fixed;left:var(--g);right:var(--g);top:68px;width:auto;background:var(--black);color:var(--bone);
  border:1px solid var(--stone);padding:6px 0;counter-reset:m;z-index:40;
  background-image:linear-gradient(rgba(106,104,98,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(106,104,98,.22) 1px,transparent 1px);background-size:28px 28px}
.dk .menu ul::before,.dk .menu ul::after{content:"";position:absolute;width:12px;height:12px;border:1px solid var(--bone)}
.dk .menu ul::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.dk .menu ul::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.dk .menu li{counter-increment:m}
.dk .menu li a{display:grid;grid-template-columns:34px 1fr 18px;align-items:center;gap:8px;padding:16px;border-bottom:1px solid var(--stone);
  font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--bone);text-decoration:none}
.dk .menu li:last-child a{border-bottom:0}
.dk .menu li a::before{content:counter(m,decimal-leading-zero);font-size:12px;color:rgba(246,244,240,.62);position:static;width:auto;height:auto;background:none}
.dk .menu li a::after{content:"";width:9px;height:9px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);justify-self:end;margin-right:4px}
.dk .menu li a:hover,.dk .menu li a[aria-current]{background:var(--bone);color:var(--black);text-decoration:none}
.dk .menu li a:hover::before,.dk .menu li a[aria-current]::before{color:var(--black)}
.dk .menu summary{-webkit-tap-highlight-color:transparent}
.dk .menu[open] summary{background:var(--black);border-color:var(--hi)}